:root
    {
    --navy:#071a30;
    --navy2:#103b63;
    --blue:#1380ff;
    --cyan:#FFDF01;
    --ink:#172033;
    --muted:#68758a;
    --bg:#f4f8fc;
    --white:#fff;
    --line:#dde6f1;
    --shadow:0 18px 45px rgba(7,26,48,.13)
    }
*{
 box-sizing:border-box;
 margin:0;padding:0
 }

html
    {
    scroll-behavior:smooth
    }
body
    {
    font-family:Segoe UI,Arial,sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.65
    }
a
    {
    text-decoration:none;
    color:inherit
    }

.container
    {
    width:min(1180px,92%);
    margin:auto
    }

.topbar
    {
    background:var(--navy);
    color:#cbd8e7;
    font-size:.87rem;
    padding:.5rem 0
    }
    
.topbar .container
    {
    display:flex;
    justify-content:space-between
    }
    
.header
    {
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(255,255,255,.96);
    backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line)
    }
    
.nav
    {
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between
    }
    
.brand
    {
    display:flex;
    align-items:center;
    gap:.75rem;
    font-weight:800;
    color:var(--navy);
    font-size:1.15rem
    }
    
.mark
    {
    width:42px;
    height:42px;
    border-radius:13px;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    display:grid;
    place-items:center;
    color:#fff;
    box-shadow:0 8px 20px rgba(37,140,255,.3)
    }
    
nav ul
    {
    display:flex;
    gap:1.15rem;
    list-style:none;
    align-items:center
    }
    
nav a
    {
    font-weight:650;
    color:#34445c
    }
    
nav a:hover,nav a.active
    {
    text-decoration: underline #FFDF01 3px;
  text-underline-offset: 10px;
    color:var(--blue)
    }
    
.toggle
    {
    display:none;
    border:0;
    background:none;
    font-size:1.5rem
    }
    
.hero
    {
    background:radial-gradient(circle at 85% 12%,rgba(91,217,255,.26),transparent 24%),linear-gradient(135deg,#06162a,#123e67 65%,#0b2948);
    color:#fff;
    padding:7rem 0 5.5rem;
    overflow:hidden
    }
    
.hero-grid
    {
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:4rem;
    align-items:center
    }
    
.eyebrow
    {
    display:inline-block;
    color:var(--cyan);
    font-size:.82rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.15em;
    margin-bottom:1rem
    }

.hero h1
    {
    font-size:clamp(2.8rem,6vw,5.5rem);
    line-height:1.02;
    letter-spacing:-.045em;
    margin-bottom:1.3rem
    }
    
.hero p
    {
    color:#d6e2ef;
    font-size:1.12rem;
    max-width:690px;
    margin-bottom:2rem
    }
    
.actions
    {
    display:flex;
    gap:1rem;
    flex-wrap:wrap
    }
    
.btn
    {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    padding:.85rem 1.25rem;
    border-radius:12px;
    font-weight:750;
    border:1px solid transparent
    }

.primary
    {
    background:linear-gradient(135deg,var(--blue),#2472de);
    color:#fff;
    box-shadow:0 10px 25px rgba(37,140,255,.28)
    }
    
.light
    {
    background:#fff;
    color:var(--navy)
    }
    
.glass
    {
    background:rgba(255,255,255,.1);
    border:1px solid rgba(255,255,255,.2);
    border-radius:24px;
    padding:1.3rem;backdrop-filter:blur(12px)
    }
    
.metrics
    {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1rem
    }
    
.metric
    {
    background:rgba(255,255,255,.1);
    padding:1.1rem;
    border-radius:16px
    }
    
.metric strong
    {
    display:block;
    font-size:1.8rem
    }
    
.metric span
    {
    font-size:.9rem;
    color:#c8d7e6
    }
    
section
    {
    padding:5.2rem 0
    }
    
.section-head
    {
    display:flex;
    justify-content:space-between;
    align-items:end;
    gap:2rem;
    margin-bottom:2.3rem
    }
    
.section-head h2
    {
    font-size:clamp(2rem,4vw,3.2rem);
    line-height:1.1;color:var(--navy)
    }
    
.section-head p
    {
    max-width:620px;
    color:var(--muted)
    }
    
.cards
    {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.4rem
    }

.card,.panel
    {
    background:#fff;
    border:1px solid var(--line);
    border-radius:20px;
    padding:1.7rem;
    box-shadow:0 8px 24px rgba(20,44,74,.06)
    }
    
.card
    {
    transition:.25s
    }
    
.card:hover
    {
    transform:translateY(-6px);
    box-shadow:var(--shadow)
    }
    
.icon
    {
    width:54px;
    height:54px;
    border-radius:16px;
    background:#eaf4ff;
    display:grid;
    place-items:center;
    color:var(--blue);
    font-size:1.4rem;
    margin-bottom:1.1rem
    }
    
.card h3,.panel h3
    {
    color:var(--navy);
    margin-bottom:.6rem
    }
    
.card p,.panel p
    {
    color:var(--muted)
    }
    
.link
    {
    display:inline-block;
    color:var(--blue);
    font-weight:800;
    margin-top:1rem
    }
    
.band
    {background:linear-gradient(135deg,#eaf4ff,#f9fbfe);
    border-block:1px solid var(--line)
    }
    
.split
    {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3.4rem;
    align-items:center
    }
    
.visual
    {
    min-height:390px;
    border-radius:28px;
    background:linear-gradient(135deg,#0b2948,#258cff);
    position:relative;
    box-shadow:var(--shadow);
    overflow:hidden
    }
.visual:before
    {
    content:'';
    position:absolute;
    inset:14%;
    border:1px solid rgba(255,255,255,.34);
    border-radius:30px;
    transform:rotate(-8deg)
    }
    
.visual:after
    {
    content:'GROUP';
    position:absolute;
    right:1.5rem;
    bottom:.7rem;
    font-size:4rem;
    font-weight:900;
    color:rgba(255,255,255,.14)
    }

.checks
    {
    display:grid;
    gap:.9rem;  
    margin-top:1.4rem
    }
    
.check
    {
    display:flex;
    gap:.75rem
    }
    
.tick
    {
    width:25px;
    height:25px;
    border-radius:50%;
    background:#e7f3ff;
    color:var(--blue);
    display:grid;
    place-items:center;
    font-weight:900;
    flex:0 0 auto
    }

.stats
    {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem
    }

.stat
    {
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:1.4rem;
    text-align:center
    }

.stat strong
    {
    display:block;
    color:var(--navy);
    font-size:2rem
    }
    
.stat span
    {
    color:var(--muted)
    }
    
.page-hero
    {
    background:linear-gradient(135deg,#06162a,#123e67);
    color:#fff;
    padding:5rem 0 4rem
    }
    
.page-hero h1
    {
    font-size:clamp(2.5rem,5vw,4.3rem);
    line-height:1.06;
    margin-bottom:1rem
    }
    
.page-hero p
    {
    max-width:760px;
    color:#d5e1ed;
    font-size:1.08rem
    }
    
.content-grid
    {
    display:grid;
    grid-template-columns:1.3fr .7fr;gap:2rem
    }
    
.list
    {
    padding-left:1.2rem;
    color:var(--muted)
    }
    
.list li
    {
    margin:.45rem 0
    }
    
.contact-grid
    {
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:2rem
    }
    
form
    {
    display:grid;
    gap:1rem
    }
    
input,select,textarea
    {
    width:100%;
    padding:.95rem 1rem;
    border:1px solid #cfd9e5;
    border-radius:12px;
    font:inherit
    }
    
textarea
    {
    min-height:150px
    }
    
button
    {
    cursor:pointer
    }
    
footer
    {
    background:#06162a;
    color:#c8d5e3;
    padding:3.5rem 0 1.2rem
    }
    
.footer-grid
    {
    display:grid;
    grid-template-columns:1.2fr repeat(3,.7fr);
    gap:2rem
    }
    
footer h4
    {
    color:#fff;
    margin-bottom:.7rem
    }
    
footer ul
    {
    list-style:none
    }
    
.copy
    {
    border-top:1px solid rgba(255,255,255,.1);
    margin-top:2.5rem;
    padding-top:1rem;
    display:flex;
    justify-content:space-between;
    font-size:.9rem
    }

@media(max-width:900px)
    {
    .hero-grid,.split,.content-grid,.contact-grid
    {
    grid-template-columns:1fr
    }
    
.cards  
    {
    grid-template-columns:1fr
    }
    
.stats
    {
    grid-template-columns:repeat(2,1fr)
    }
    
.toggle
    {
    display:block
    }
    
nav ul
    {
    display:none;
    position:absolute;
    top:76px;
    left:4%;
    right:4%;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:1rem;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:flex-start
    }

nav ul.open
    {
    display:flex
    }
    
.footer-grid
    {
    grid-template-columns:1fr 1fr
    }      
    }

@media(max-width:560px)
    {
    .topbar .container,.section-head,.copy
    {
    flex-direction:column;
    align-items:flex-start
    }

.metrics,.stats,.footer-grid
    {
    grid-template-columns:1fr
    }
    
.hero
    {
    padding-top:5rem
    }
    }

.service-tags
    {
    display:flex;
    flex-wrap:wrap;
    gap:.65rem;margin-top:1.2rem
    }

.service-tag
    {
    padding:.55rem .85rem;
    border-radius:999px;
    background:#eaf4ff;
    color:var(--navy);
    font-weight:700;
    font-size:.88rem
    }
    
.process
    {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem
    }
    
.process-step
    {
    background:white;
    border:1px solid var(--line);
    border-radius:18px;
    padding:1.4rem;
    position:relative
    }

.process-step .num
    {
    width:38px;
    height:38px;
    border-radius:12px;
    background:var(--navy);
    color:white;
    display:grid;
    place-items:center;
    font-weight:800;
    margin-bottom:1rem
    }
    
.case-card
    {
    background:linear-gradient(135deg,#0d2d4f,#123f69);
    color:white;
    border-radius:22px;
    padding:1.8rem
    }
    
.case-card p
    {
    color:#d5e2ef
    }

.quote
    {
    font-size:1.25rem;
    color:var(--navy);
    font-weight:700;
    line-height:1.5
    }
    
.sector-grid
    {
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1rem
    }
    
.sector
    {
    background:white;
    border:1px solid var(--line);
    border-radius:16px;
    padding:1.3rem
    }
    
.sector h3
    {
    color:var(--navy);
    margin-bottom:.4rem
    }

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

@media(max-width:560px)
    {
    .process,.sector-grid
    {
    grid-template-columns:1fr
    }
    }