/* =========
   Theme: original restored
   ========= */


    /* =========
       Theme: inspired by the business card (deep blue + neon circuitry glow)
       Super-compatible CSS: no fancy dependencies, no external fonts.
       ========= */

    :root{
      --bg0:#050a14;
      --bg1:#07142a;
      --bg2:#0a2a52;
      --ink:#e9f2ff;
      --muted:#b7c7e6;
      --line:rgba(170,210,255,.18);
      --glow:rgba(80,190,255,.45);
      --glow2:rgba(140,240,255,.25);
      --accent:#7bd8ff;
      --accent2:#49b8ff;
      --gold:#f3d48a;
      --panel:rgba(8,18,40,.72);
      --panel2:rgba(8,18,40,.55);
      --shadow:0 18px 55px rgba(0,0,0,.55);
      --radius:18px;
      --radius2:24px;
      --max:1100px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      color:var(--ink);
      background: radial-gradient(1200px 700px at 12% 8%, rgba(85,200,255,.20) 0%, rgba(85,200,255,0) 55%),
                  radial-gradient(900px 520px at 75% 10%, rgba(80,190,255,.18) 0%, rgba(80,190,255,0) 55%),
                  radial-gradient(900px 520px at 70% 85%, rgba(140,240,255,.10) 0%, rgba(140,240,255,0) 60%),
                  linear-gradient(180deg, var(--bg0), var(--bg1) 35%, var(--bg0));
      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
      line-height:1.45;
    }

    /* Subtle "circuit grid" overlay */
    .circuit-overlay{
      position:fixed;
      inset:0;
      pointer-events:none;
      opacity:.38;
      background-image:
        linear-gradient(to right, rgba(123,216,255,.08) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(123,216,255,.06) 1px, transparent 1px),
        radial-gradient(circle at 30% 20%, rgba(123,216,255,.20), transparent 55%),
        radial-gradient(circle at 78% 35%, rgba(73,184,255,.18), transparent 50%),
        radial-gradient(circle at 55% 78%, rgba(73,184,255,.12), transparent 52%);
      background-size: 56px 56px, 56px 56px, auto, auto, auto;
      mix-blend-mode: screen;
    }

    a{color:var(--accent); text-decoration:none}
    a:hover{text-decoration:underline}

    .wrap{max-width:var(--max); margin:0 auto; padding:22px 16px 70px}

    header{
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(10,35,70,.74), rgba(6,12,26,.55));
      box-shadow: var(--shadow);
      border-radius: var(--radius2);
      overflow:hidden;
      position:relative;
    }
    header::before{
      content:"";
      position:absolute;
      inset:-2px;
      background:
        linear-gradient(90deg, rgba(123,216,255,.18), rgba(73,184,255,0) 55%),
        radial-gradient(600px 220px at 30% 0%, rgba(123,216,255,.22), transparent 60%),
        radial-gradient(520px 220px at 85% 35%, rgba(73,184,255,.18), transparent 60%);
      pointer-events:none;
      opacity:.9;
    }

    .hero{
      position:relative;
      padding:30px 22px 18px;
      display:flex;
      gap:20px;
      flex-wrap:wrap;
      align-items:flex-start;
      justify-content:space-between;
    }

    .brand{
      min-width:280px;
      flex:1 1 520px;
    }

    .kicker{
      display:inline-block;
      font-size:12px;
      letter-spacing:.14em;
      text-transform:uppercase;
      color:var(--muted);
      padding:6px 10px;
      border:1px solid var(--line);
      border-radius:999px;
      background:rgba(0,0,0,.18);
      box-shadow: 0 0 0 1px rgba(123,216,255,.07) inset;
    }

    h1{
      margin:12px 0 6px;
      font-size:34px;
      letter-spacing:.02em;
    }
    .since{
      color:var(--muted);
      margin:0 0 14px;
      font-size:15px;
    }

    .tagline{
      margin:0 0 18px;
      font-size:16px;
      color:var(--ink);
      max-width:62ch;
    }

    .cta-row{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:center;
      margin-top:8px;
    }
    .btn{
      display:inline-block;
      padding:11px 14px;
      border-radius:12px;
      border:1px solid var(--line);
      background: linear-gradient(180deg, rgba(123,216,255,.18), rgba(73,184,255,.08));
      color:var(--ink);
      font-weight:650;
      box-shadow: 0 10px 22px rgba(0,0,0,.35);
    }
    .btn:hover{ text-decoration:none; filter:brightness(1.05) }
    .btn.secondary{
      background: rgba(0,0,0,.20);
      color:var(--ink);
    }

    .card-details{
      flex:0 1 360px;
      min-width:280px;
      border:1px solid var(--line);
      border-radius: var(--radius);
      background: rgba(0,0,0,.20);
      padding:14px 14px;
      box-shadow: 0 10px 25px rgba(0,0,0,.30);
    }
    .card-details h2{
      margin:0 0 10px;
      font-size:14px;
      letter-spacing:.12em;
      text-transform:uppercase;
      color:var(--muted);
    }
    .detail{
      display:flex;
      gap:10px;
      align-items:flex-start;
      padding:9px 0;
      border-top:1px solid rgba(170,210,255,.10);
    }
    .detail:first-of-type{border-top:none}
    .icon{
      width:34px; height:34px;
      border-radius:12px;
      border:1px solid var(--line);
      background: radial-gradient(circle at 30% 30%, rgba(123,216,255,.22), rgba(0,0,0,.08));
      display:flex; align-items:center; justify-content:center;
      flex:0 0 auto;
      box-shadow: 0 0 18px rgba(123,216,255,.14);
      font-size:16px;
    }
    .detail b{display:block}
    .detail small{color:var(--muted)}

    nav{
      position:relative;
      padding:0 22px 18px;
      display:flex;
      gap:14px;
      flex-wrap:wrap;
      border-top:1px solid rgba(170,210,255,.12);
    }
    nav a{
      color:var(--muted);
      padding:10px 0;
      font-size:14px;
      text-decoration:none;
    }
    nav a:hover{color:var(--ink); text-decoration:underline}

    main{margin-top:18px}

    .grid{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:16px;
    }
    @media (max-width: 980px){
      .grid{grid-template-columns: 1fr}
    }

    .panel{
      border:1px solid var(--line);
      background: linear-gradient(180deg, var(--panel), var(--panel2));
      border-radius: var(--radius2);
      padding:18px 16px;
      box-shadow: var(--shadow);
      position:relative;
      overflow:hidden;
    }
    .panel::before{
      content:"";
      position:absolute;
      inset:-60px -60px auto auto;
      width:260px; height:260px;
      background: radial-gradient(circle, rgba(123,216,255,.18), transparent 60%);
      pointer-events:none;
      transform: rotate(18deg);
    }
    .panel h2{
      margin:0 0 10px;
      font-size:20px;
      letter-spacing:.01em;
    }
    .panel p{margin:10px 0; color:var(--ink)}
    .panel .muted{color:var(--muted)}

    .pill-row{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
      margin:12px 0 4px;
    }
    .pill{
      padding:7px 10px;
      border:1px solid rgba(170,210,255,.18);
      border-radius:999px;
      background: rgba(0,0,0,.18);
      color:var(--muted);
      font-size:13px;
    }

    .highlight{
      border:1px solid rgba(123,216,255,.22);
      background: linear-gradient(180deg, rgba(73,184,255,.15), rgba(0,0,0,.20));
      border-radius: var(--radius);
      padding:12px 12px;
      box-shadow: 0 10px 22px rgba(0,0,0,.30);
      margin-top:10px;
    }
    .highlight b{color:var(--accent)}
    .highlight .gold{color:var(--gold)}

    .services h2{
      display:flex;
      align-items:baseline;
      gap:10px;
    }
    .services h2 span{
      font-size:12px;
      color:var(--muted);
      letter-spacing:.12em;
      text-transform:uppercase;
    }

    details{
      border:1px solid rgba(170,210,255,.14);
      border-radius:16px;
      background: rgba(0,0,0,.18);
      padding:10px 12px;
      margin:10px 0;
      box-shadow: 0 8px 18px rgba(0,0,0,.22);
    }
    summary{
      cursor:pointer;
      font-weight:750;
      color:var(--ink);
      list-style:none;
    }
    summary::-webkit-details-marker{display:none}
    summary::after{
      content:"+";
      float:right;
      color:var(--accent);
      font-weight:900;
    }
    details[open] summary::after{content:"–"}
    details p{color:var(--muted); margin:10px 0 0}
    details ul{margin:10px 0 0 18px; color:var(--muted)}
    details li{margin:6px 0}

    .two-col{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:12px;
    }
    @media (max-width: 720px){
      .two-col{grid-template-columns:1fr}
    }

    .contact-grid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      align-items:start;
    }
    @media (max-width: 900px){
      .contact-grid{grid-template-columns:1fr}
    }

    label{display:block; font-weight:650; margin:10px 0 6px}
    input, textarea, select{
      width:100%;
      padding:12px 12px;
      border-radius:14px;
      border:1px solid rgba(170,210,255,.18);
      background: rgba(0,0,0,.22);
      color: var(--ink);
      outline:none;
    }
    input:focus, textarea:focus, select:focus{
      border-color: rgba(123,216,255,.40);
      box-shadow: 0 0 0 3px rgba(123,216,255,.12);
    }
    textarea{min-height:120px; resize:vertical}
    .form-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
    .note{
      font-size:13px;
      color:var(--muted);
      margin-top:10px;
      border-top:1px solid rgba(170,210,255,.12);
      padding-top:10px;
    }
    footer{
      margin-top:18px;
      color:var(--muted);
      text-align:center;
      font-size:13px;
      opacity:.95;
    }

    /* Print styles (optional): keep content clean if someone prints the page */
    @media print{
      .circuit-overlay{display:none}
      header, .panel{box-shadow:none}
      a{color:#000}
      body{background:#fff; color:#000}
      .panel, header{border-color:#bbb; background:#fff}
    }

/* === LOGO CHIP STYLE === */

.logo-chip {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;

  /* glass + depth */
  background: linear-gradient(145deg, rgba(20,40,80,.6), rgba(0,0,0,.4));
  border: 1px solid rgba(123,216,255,.25);

  /* glow */
  box-shadow:
    0 0 25px rgba(123,216,255,.25),
    inset 0 0 20px rgba(123,216,255,.15);

  display:flex;
  align-items:center;
  justify-content:center;
}

.logo-chip img {
  width: 85%;
  height: 85%;
  object-fit: cover;
  border-radius: 8px;
}

/* subtle animated glow */
.logo-chip::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:14px;
  background: radial-gradient(circle at 30% 30%, rgba(123,216,255,.25), transparent 60%);
  opacity:.6;
  pointer-events:none;
  animation: chipGlow 4s ease-in-out infinite alternate;
}

@keyframes chipGlow {
  from { opacity: .3; }
  to   { opacity: .7; }
}

/* text next to logo */
.brand-text {
  display:flex;
  flex-direction:column;
}

.brand-title {
  font-size:22px;
  font-weight:700;
  letter-spacing:.02em;
}

.brand-sub {
  font-size:14px;
  color: var(--muted);
}
  /* === Fix dropdown colors (dark theme) === */
select {
  color: var(--ink);
  background-color: rgba(0,0,0,.22);
}

/* The dropdown list items */
select option,
select optgroup {
  color: #000;          /* readable in the opened list */
  background: #fff;     /* prevents “dark on dark” / weird system colors */
}

/* If you want the selected placeholder to look muted */
select:invalid {
  color: var(--muted);
}