/* === styles.css === */
:root{
    --page-bg:#13294b; 
    --surface-1:#0e172a; 
    --surface-2:#0b1220;
    --text:#eef3ff; 
    --text-muted:#c9d3e6; 
    --border: rgba(255,255,255,0.12);
    --cyan:#22c7e4; 
    --indigo:#5661f2; 
    --violet:#9b5ef5;
    --glass-bg: rgba(18,36,65,0.55);
    --glass-border: rgba(255,255,255,0.14);
  }
  
  html,body{height:100%}
  
  body{
    font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
    background:var(--page-bg); 
    color:var(--text); 
    padding-top:72px; 
    line-height:1.55;
  }
  
  /* Header */
  .tech-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: linear-gradient(120deg, var(--glass-bg), rgba(41, 77, 136, 0.35));
    border-bottom: 1px solid var(--glass-border);
    z-index: 1030;
    transition: box-shadow .3s ease, background .3s ease;
  }
  .tech-header.scrolled{ box-shadow: 0 10px 30px rgba(0,0,0,0.25); 
    background: rgba(18,36,65,0.78);
  }
/* Brand text */
.brand .brand-text {
  color: #ffffff !important;
  font-weight: 700;       /* Make it bolder */
  letter-spacing: .5px;   /* Slightly more spaced for polish */
  font-size: 1.4rem;      /* Increase size */
}

/* Logo pill */
.logo-pill {
  width: 38px;            /* Bigger width */
  height: 38px;           /* Bigger height */
  border-radius: 12px;    /* Keep soft corners */
  background: conic-gradient(from 180deg at 50% 50%, var(--cyan), var(--indigo), var(--violet), var(--cyan));
  box-shadow: 0 0 14px rgba(34,199,228,0.55),
  inset 0 0 22px rgba(86,97,242,0.35); 
  display: inline-block;
  margin-right: 10px;     /* Add spacing from text */
}
  .tech-link{
    position:relative;
    color:var(--text-muted);
    padding:.5rem .8rem;
    border-radius:10px;
    text-decoration:none;
    font-weight:500;
    transition:color .2s,background .2s,transform .2s
  }
  .tech-link:hover{
    color:var(--text);
    background:rgba(255,255,255,.06);
    transform:translateY(-1px)
  }
  .tech-link.active{color:#fff}
  .header-underline{
    height:2px;
    background:linear-gradient(90deg,var(--cyan),var(--indigo),var(--violet),var(--cyan));
    background-size:200% 100%;
    animation:moveLine 8s linear infinite;
    opacity:.6
  }
  .tech-link::after{
    content:"";
    position:absolute; left:12px; right:12px; bottom:6px; height:2px;
    background: linear-gradient(90deg, var(--cyan), var(--indigo), var(--violet));
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
  }
  .tech-link:hover::after, .tech-link.active::after{ transform: scaleX(1); }
  
  .tech-burger{
    border: 1px solid var(--glass-border);
    background: rgba(255,255,255,0.06);
    color: var(--text);
  }
  .tech-dropdown{
    background: rgba(9,14,22,0.95);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
  }
  .tech-dropdown .dropdown-item{ color: var(--text); }
  .tech-dropdown .dropdown-item:hover{ background: rgba(255,255,255,0.06); }
  
  @keyframes moveLine{0%{background-position:0 0}100%{background-position:200% 0}}
  
  /* Inner hero (single image) */
  .inner-hero{
    position:relative;
    min-height:56vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    overflow:hidden
  }
  .inner-hero .bg{
    position:absolute;
    inset:0;
    background-position:center;
    background-size:cover;
    transform:scale(1.02)
  }
  .inner-hero .overlay{
    position:absolute;
    inset:0;
    background:
      radial-gradient(60% 60% at 70% 20%, rgba(34,199,228,.18), transparent 60%),
      linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.65))
  }
  .inner-hero .content{
    position:relative;
    z-index:1;
    padding:24px;
    max-width:900px;
    color:#fff;
    text-shadow:0 2px 6px rgba(0,0,0,.45)
  }
  .inner-hero h1{
    font-weight:700;
    letter-spacing:.2px;
    line-height:1.1
  }
  .inner-hero p{
    color:var(--text-muted);
    font-size:1.05rem;
    margin-top:.75rem
  }
  
  /* Sections */
  .section-muted{
    background:linear-gradient(145deg,var(--surface-1) 0%,#1a2f57 100%);
    position:relative;
    z-index:1
  }
  .section-muted::before{
    content:"";
    position:absolute;
    inset:0;
    background:
      radial-gradient(800px 400px at 90% 10%, rgba(86,97,242,.10), transparent 60%),
      radial-gradient(600px 300px at 10% 90%, rgba(34,199,228,.10), transparent 60%);
    z-index:0
  }
  .section-muted>*{position:relative;z-index:1}
  
  /* Cards */
  .card.glass{
    border-radius:16px;
    background:rgba(255,255,255,.04);
    border:1px solid var(--border);
    backdrop-filter:blur(6px);
    transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .card.glass:hover{
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(0,0,0,.28);
    border-color: rgba(86,97,242,0.38);
  }
  .card.glass h5{
    color: var(--text);       /* ensure headings are bright */
    font-weight:600;
  }
  .card.glass p{
    color: var(--text-muted); /* muted descriptions */
  }
  .card.glass:hover h5{
    color: var(--cyan);       /* glow effect on hover */
    transition: color 0.2s ease;
  }

  .card.glass .icon-wrap{
    margin: 0 auto 12px;    /* center horizontally, keep gap to title */
  }
  
  .icon-wrap{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:56px;
    height:56px;
    border-radius:14px;
    background:linear-gradient(135deg, rgba(86,97,242,.18), rgba(155,94,245,.18));
    border:1px solid rgba(155,94,245,.35);
    color:var(--cyan);
    font-size:1.15rem;
    box-shadow:inset 0 0 8px rgba(86,97,242,.2);
    transition: transform .2s ease, box-shadow .2s ease;
  }
  .card.glass:hover .icon-wrap{
    transform: scale(1.05);
    box-shadow: inset 0 0 10px rgba(155,94,245,.28);
  }
  
  /* Buttons */
  .btn-primary{
    background:linear-gradient(90deg,var(--indigo),var(--violet));
    border:none;
    font-weight:600
  }
  .btn-primary:hover{filter:brightness(1.05)}
  
  /* Contact Section */
  .contact h2,
  .contact p,
  .contact span,
  .contact a {
    color: var(--text) !important; /* keep headings and text light */
  }
  .contact .text-white-50,
  .contact p.text-white-50 {
    color: var(--text-muted) !important; /* muted subtext */
  }
  .contact .fw-semibold {
    color: var(--text) !important; /* ensure address stays bright */
  }
  
  
  /* Footer */
  footer { background: #0a0f1c; color: #b8c2cc; }