@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800;900&display=swap');
:root{
    --bg:#060b14;
    --panel:#0c1424;
    --text:#edf5ff;
    --muted:#a9b8ce;
    --blue:#0f6cbd;
    --cyan:#52d6ff;
    --green:#7fba00;
    --yellow:#ffb900;
    --line:rgba(255,255,255,.12);
    --glass:rgba(255,255,255,.07);
    --shadow:0 30px 90px rgba(0,0,0,.35);
    --radius:30px}*{box-sizing:border-box}
    
    html{
        scroll-behavior:smooth
    }
    body{
        margin:0;
        font-family:Inter,"Segoe UI",system-ui,sans-serif;
        background:radial-gradient(circle at 12% 8%,rgba(15,108,189,.45),transparent 28rem),radial-gradient(circle at 80% 20%,rgba(82,214,255,.22),transparent 28rem),radial-gradient(circle at 55% 90%,rgba(127,186,0,.16),transparent 30rem),var(--bg);
        color:var(--text);
        overflow-x:hidden}

    .noise{
        position:fixed;
        inset:0;
        pointer-events:none;
        z-index:0;
        opacity:.08;
        background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}
        
    a{
        color:inherit}
        
    .site-header{
        position:sticky;
        top:0;
        z-index:20;
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:2rem;
        padding:1rem clamp(1rem,4vw,4rem);
        background:rgba(6,11,20,.72);
        backdrop-filter:blur(24px);
        border-bottom:1px solid var(--line)}
    
    .brand{
        display:flex;
        align-items:center;
        gap:.75rem;
        text-decoration:none}
        
    .brand span{
        width:42px;
        height:42px;
        border-radius:14px;
        display:grid;
        place-items:center;
        background:linear-gradient(135deg,var(--blue),var(--cyan));
        font-weight:900;
        box-shadow:0 14px 40px rgba(82,214,255,.22)}
        
    nav{
        display:flex;
        gap:1rem;
        flex-wrap:wrap}
        
    nav a{
        text-decoration:none;
        color:var(--muted);
        font-weight:700;
        font-size:.92rem}
        
    nav a:hover{
        color:var(--text)}
        
    .section{
        width:min(1180px,calc(100% - 2rem));
        margin:0 auto;
        padding:clamp(4rem,8vw,7rem) 0}
        
    .hero{
        min-height:calc(100vh - 74px);
        display:grid;
        grid-template-columns:1.04fr .96fr;
        align-items:center;
        gap:clamp(2rem,5vw,5rem)}
        
    .kicker{
        margin:0 0 1rem;
        color:var(--cyan);
        font-weight:900;
        letter-spacing:.14em;
        text-transform:uppercase;
        font-size:.78rem}
        
    h1,
    h2,
    h3{
        margin:0;
        line-height:.98;
        letter-spacing:-.055em}
        
    h1{
        font-size:clamp(3.4rem,7.5vw,7.4rem)}
        
    h2{
        font-size:clamp(2.2rem,4.8vw,4.4rem)}
        
    h3{
        font-size:1.25rem}
        
    .lead,
    .intro p,
    .contact p{
        font-size:clamp(1.1rem,2vw,1.35rem);
        line-height:1.7;
        color:var(--muted);
        max-width:68ch}
        
    .actions,
    .tech-strip,
    .value-row{
        display:flex;
        gap:.8rem;
        flex-wrap:wrap;
        margin-top:1.8rem}
        
    .btn{
        display:inline-flex;
        justify-content:center;
        align-items:center;
        min-height:48px;
        padding:.9rem 1.2rem;
        border-radius:999px;
        text-decoration:none;
        font-weight:900;
        border:1px solid var(--line)}
        
    .btn.primary{
        background:linear-gradient(135deg,var(--blue),var(--cyan));
        color:#fff;
        box-shadow:0 20px 50px rgba(15,108,189,.35)}
        
    .btn.ghost{
        background:rgba(255,255,255,.06);
        color:var(--text)}
        
    .tech-strip span,
    .value-row span{
        border:1px solid var(--line);
        background:var(--glass);
        padding:.62rem .85rem;
        border-radius:999px;
        color:var(--muted);
        font-weight:800}
        
    .hero-media{
        position:relative;
        min-height:640px;
        display:grid;
        place-items:center}
        
    .portrait{
        width:min(500px,86vw);
        aspect-ratio:1/1.08;
        object-fit:cover;
        border-radius:42px;
        border:1px solid rgba(255,255,255,.25);
        box-shadow:var(--shadow);
        z-index:2}
        
    .orb{
        position:absolute;
        border-radius:50%;
        filter:blur(4px);
        animation:float 7s ease-in-out infinite}
        
    .orb-a{
        width:360px;
        height:360px;
        background:rgba(82,214,255,.22);
        left:0;top:70px}
        
    .orb-b{
        width:260px;
        height:260px;
        background:rgba(127,186,0,.16);
        right:20px;
        bottom:60px;
        animation-delay:1.2s}
        
    .floating-card{
        position:absolute;
        z-index:3;
        padding:1rem 1.1rem;
        border:1px solid var(--line);
        border-radius:22px;
        background:rgba(12,20,36,.78);
        backdrop-filter:blur(18px);
        box-shadow:var(--shadow)}
        
    .floating-card strong{
        display:block;
        font-size:1.2rem}
        
    .floating-card span{
        color:var(--muted);
        font-size:.9rem}
        
    .fc-one{
        left:0;
        bottom:140px}
        
    .fc-two{
        right:0;
        top:150px}
        
    .intro{
        max-width:980px}
        
    .expertise-grid{
        display:grid;
        grid-template-columns:repeat(3,1fr);
        gap:1rem}
        
    .expertise-card,
    .connection-card,
    .contact-card{
        padding:1.4rem;
        background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.045));
        border:1px solid var(--line);
        border-radius:var(--radius);
        box-shadow:0 20px 70px rgba(0,0,0,.22)}
        
    .expertise-card span{
        color:var(--cyan);
        font-weight:900}
        
    .expertise-card p,
    .connection-card p{
        color:var(--muted);
        line-height:1.65}
        
    .image-band{
        display:grid;
        grid-template-columns:1.2fr .8fr;
        grid-template-rows:280px 280px;
        gap:1rem}
        
    .image-card{
        position:relative;
        overflow:hidden;
        border-radius:var(--radius);
        background-size:cover;
        background-position:center;
        box-shadow:var(--shadow);
        border:1px solid var(--line)}
        
    .image-card.large{
        grid-row:1/3}
        
    .image-card:before{
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.76))}
        
    .image-card div{
        position:absolute;
        inset:auto 1.3rem 1.3rem 1.3rem}
        
    .image-card p{
        color:var(--cyan);
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.12em;
        font-size:.76rem}
        
    .section-title{
        display:flex;
        justify-content:space-between;
        gap:2rem;
        align-items:end;
        margin-bottom:2rem}
        
    .impact-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:1rem}
        
    .impact-item{
        min-height:145px;
        display:flex;
        align-items:end;
        padding:1.2rem;
        border-radius:26px;
        background:linear-gradient(135deg,rgba(15,108,189,.28),rgba(255,255,255,.06));
        border:1px solid var(--line);
        font-weight:900}
        
    .journey{
        padding:2rem;
        border-radius:var(--radius);
        background:linear-gradient(135deg,rgba(15,108,189,.28),rgba(82,214,255,.08));
        border:1px solid var(--line)}
        
    .journey-flow{
        display:flex;
        align-items:center;
        gap:.6rem;flex-wrap:wrap}
        
    .journey-flow span{
        flex:1 1 160px;
        padding:1rem;
        border-radius:18px;
        background:rgba(255,255,255,.08);
        font-weight:900;
        text-align:center}
        
    .journey-flow b{
        width:34px;
        height:2px;
        background:var(--cyan)}
        
    .connection-grid{
        display:grid;
        grid-template-columns:repeat(4,1fr);
        gap:1rem}
        
    .values{
        text-align:center}
        
    .value-row{
        justify-content:center}
        
    .contact{
        display:grid;
        grid-template-columns:1fr 360px;
        gap:2rem;align-items:center}
        
    .contact-card{
        text-align:center}
        
    .contact-card img{
        width:140px;
        height:140px;
        object-fit:cover;
        border-radius:28px;
        border:1px solid var(--line)}
        
    .contact-card 
    .btn{
        width:100%;
        margin-top:.7rem}
        
    footer{
        text-align:center;
        color:var(--muted);
        padding:2rem}
        
    .reveal{
        opacity:0;
        transform:translateY(22px);
        transition:opacity .7s ease,transform .7s ease}
        
    .reveal.visible{
        opacity:1;
        transform:none}
        
    .delay-1{
        transition-delay:.12s}

    
    
        @keyframes 
        float{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
        @media(max-width:980px){
            .hero,
            .contact{grid-template-columns:1fr}
            .hero-media{min-height:560px}
            .expertise-grid,
            .impact-grid,
            .connection-grid{grid-template-columns:repeat(2,1fr)}
            .image-band{grid-template-columns:1fr;grid-template-rows:360px 260px 260px}
            .image-card.large{grid-row:auto}
            .section-title{display:block}}
            
        @media(max-width:680px){
            .site-header{align-items:flex-start;flex-direction:column}
            h1{font-size:3.25rem}
            .expertise-grid,
            .impact-grid,
            .card { min-height: auto; }
            .card-number { margin-bottom: 2rem; }
            .connection-grid{grid-template-columns:1fr}
            .hero-media{min-height:500px}
            .floating-card{position:relative;left:auto;right:auto;top:auto;bottom:auto;margin-top:1rem}
            .portrait{width:100%}
            .journey-flow b{display:none}}

:root {
  --bg: #06101d;
  --surface: #102238;
  --text: #f5f9ff;
  --muted: #a8b9cd;
  --cyan: #53e3ff;
  --line: rgba(177,210,244,.16);
  --radius: 24px;
}

.section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px;
}

.section-heading {
  max-width: 800px;
  margin-bottom: 60px;
}

.kicker {
  color: var(--cyan);
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.section-heading h2 {
  color: var(--text);
  font-size: 3rem;
  margin-bottom: 16px;
}

.section-heading p {
  color: var(--muted);
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  padding: 32px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(
    145deg,
    rgba(20,42,66,.9),
    rgba(10,26,44,.8)
  );
  transition: all .3s ease;
}

.card:hover {
  transform: translateY(-6px);
  border-color: rgba(83,227,255,.4);
}

.card-number {
  display: inline-block;
  color: var(--cyan);
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .12em;
  margin-bottom: 40px;
}

.insight-card {
  min-height: 280px;
  display: flex;
  flex-direction: column;
}

.insight-card h3 {
  color: var(--text);
  font-size: 1.5rem;
  line-height: 1.3;
  margin-bottom: auto;
}

.insight-card a {
  color: var(--cyan);
  font-weight: 700;
  text-decoration: none;
  margin-top: 24px;
}

.insight-card a:hover {
  opacity: 0.8;
}

@media (max-width: 900px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .section-heading h2 {
    font-size: 2.2rem;
  }
}