* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html {

    scroll-behavior: smooth;

}


body {

    font-family: 'Inter', sans-serif;

    color: #101828;

    background: #ffffff;

    overflow-x: hidden;

}


section > .container,
.hero .container {

    position:relative;

    z-index:1;

}



:root {


    
    --navy:#111827;

    --blue:#6366F1;

    --cyan:#A5F3FC;

    --light:#F9FAFB;

    --grey:#6B7280;

    --border:#E5E7EB;


}


/* NAVBAR */



.navbar {


    padding: 20px 0;

    background:

    rgba(255,255,255,0.85);


    backdrop-filter:

    blur(15px);


    transition: .4s;


}



.navbar-brand {


    font-size:30px;

    font-weight:800;

    color:var(--navy);


}



.navbar-brand span {


    color:var(--blue);


}



.nav-link {


    color:#344054;

    font-weight:500;

    margin-left:18px;

    transition:.3s;


}



.nav-link:hover {


    color:var(--blue);


}



.demo-btn {


    background:

    var(--navy);


    color:white;

    padding:

    12px 28px;


    border-radius:30px;


    text-decoration:none;


    transition:.3s;


}



.demo-btn:hover {


    background:var(--blue);

    color:white;

}


/* 
   HERO SECTION
 */



.hero {


    min-height:100vh;

    display:flex;

    align-items:center;


    padding-top:120px;


    position:relative;


    overflow:hidden;


    background:

    linear-gradient(
        180deg,
        #ffffff,
        #f4f7ff
    );


}




/* Technical grid background */


.hero::after {


    content:"";


    position:absolute;


    inset:0;


    background-image:


    linear-gradient(
        rgba(6,20,38,.04) 1px,
        transparent 1px
    ),


    linear-gradient(
        90deg,
        rgba(6,20,38,.04) 1px,
        transparent 1px
    );


    background-size:60px 60px;


    pointer-events:none;


}






.hero::before {


    content:"";


    position:absolute;


    width:600px;

    height:600px;


    right:-200px;

    top:-150px;


    background:

    radial-gradient(

    circle,

    rgba(23,105,255,.18),

    transparent 70%

    );


    animation:

    heroGlow 8s infinite alternate;


}



@keyframes heroGlow {


from{

transform:scale(1);

}


to{

transform:scale(1.2);

}


}




.hero h1 {


    font-size:70px;

    line-height:1.1;

    font-weight:800;

    color:var(--navy);


}



.small-title {


    color:var(--blue);

    font-weight:700;

    letter-spacing:2px;

    font-size:14px;

    margin-bottom:20px;


}



.hero-description {


    margin-top:25px;

    font-size:20px;

    line-height:1.7;

    color:var(--grey);

    max-width:600px;


}





/* Buttons */


.main-btn {


    display:inline-block;


    background:var(--blue);


    color:white;


    padding:15px 35px;


    border-radius:30px;


    text-decoration:none;


    transition:.35s;


}



.main-btn:hover {


    transform:translateY(-5px);


    box-shadow:

    0 15px 35px

    rgba(23,105,255,.3);


    color:white;


}



.outline-btn {


    display:inline-block;


    padding:15px 35px;


    border-radius:30px;


    border:1px solid #ccd5e0;


    color:var(--navy);


    text-decoration:none;


    transition:.3s;


}



.outline-btn:hover {


    border-color:var(--blue);


    color:var(--blue);


}









/* Drone image */


.drone-visual {


    position:relative;


    animation:

    floating 6s infinite alternate;


}



.drone-visual img {


    width:100%;


    border-radius:25px;


    box-shadow:


    0 30px 70px

    rgba(0,0,0,.15);


}



@keyframes floating {


from{

transform:translateY(0);

}


to{

transform:translateY(-20px);

}


}



.status-box {


    position:absolute;


    bottom:25px;


    left:25px;


    background:white;


    padding:20px 30px;


    border-radius:15px;


    border-left:

    4px solid var(--blue);


    box-shadow:

    0 15px 30px rgba(0,0,0,.12);


}



.status-box p {


    font-size:12px;

    color:var(--grey);


}



.status-box h5 {


    color:var(--blue);


}









/* GENERAL SECTIONS  */


.section {


    padding:120px 0;


}




.dark-section {


    background:var(--navy);


    color:white;


}



.section-heading {


    margin-bottom:60px;


}



.section-heading p {


    color:var(--blue);

    font-weight:700;

    letter-spacing:2px;


}



.section-heading h2 {


    font-size:45px;

    font-weight:800;


}



.section-heading.light h2 {


    color:white;


}








/*  TECHNOLOGY CARDS  */



.tech-card {


    background:white;


    padding:35px;


    height:100%;


    border:

    1px solid var(--border);


    border-radius:20px;


    transition:.4s;


}



.tech-card:hover {


    transform:translateY(-12px);


    box-shadow:

    0 20px 45px

    rgba(0,0,0,.08);


    border-color:var(--blue);


}








/*   SOLUTIONS  */


.solution-box {


    display:flex;


    align-items:center;


    justify-content:space-between;


    gap:50px;


    margin-bottom:90px;


}




.solution-box img {


    width:45%;


    border-radius:25px;


    transition:.4s;


}



.solution-box img:hover {


    transform:scale(1.03);


}




.solution-box h3 {


    font-size:38px;


    color:var(--navy);


}



.reverse {


    flex-direction:row-reverse;


}








/*  FUNDING  */


.funding-grid {


    display:grid;

    grid-template-columns:
    repeat(auto-fit, minmax(170px, 1fr));

    gap:22px;


}


.capability-grid {

    display:grid;

    grid-template-columns:
    repeat(2, minmax(0, 1fr));

    gap:28px;

    margin-top:34px;

}



.capability-card {

    position:relative;

    overflow:hidden;

    min-height:285px;

    padding:34px;

    border-radius:24px;

    background:
    linear-gradient(135deg, #ffffff 0%, #f6f8ff 55%, #eefbff 100%);

    border:1px solid rgba(99,102,241,.22);

    box-shadow:
    0 24px 60px rgba(16,24,40,.08);

    transition:
    transform .35s ease,
    border-color .35s ease,
    box-shadow .35s ease;

}



.capability-card::after {

    content:"";

    position:absolute;

    width:180px;

    height:180px;

    right:-70px;

    top:-80px;

    border-radius:50%;

    background:rgba(99,102,241,.12);

}



.capability-card:hover {

    transform:translateY(-10px);

    border-color:var(--blue);

    box-shadow:
    0 30px 80px rgba(99,102,241,.18);

}



.capability-card span {

    display:inline-flex;

    width:46px;

    height:46px;

    align-items:center;

    justify-content:center;

    margin-bottom:26px;

    border-radius:50%;

    background:var(--navy);

    color:white;

    font-weight:800;

}



.capability-card h3 {

    color:var(--navy);

    font-size:30px;

    font-weight:800;

    margin-bottom:16px;

}



.capability-card p {

    color:#475467;

    line-height:1.75;

    margin-bottom:0;

}


/* CYBERSECURITY */

.security-promise {

    position:relative;

    overflow:hidden;

    padding:38px 0;

    background:#111827;

    color:white;

}


.security-promise::after {

    content:"";

    position:absolute;

    inset:auto 0 0;

    height:2px;

    background:linear-gradient(90deg, transparent, #6366f1 30%, #67e8f9 70%, transparent);

}


.security-promise-inner {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:48px;

}


.security-promise-copy {

    display:flex;

    align-items:center;

    gap:28px;

}


.security-promise-label {

    flex:0 0 auto;

    color:#a5b4fc;

    font-size:12px;

    font-weight:800;

    letter-spacing:2px;

}


.security-promise h2 {

    max-width:800px;

    margin:0;

    color:white;

    font-size:25px;

    font-weight:700;

    line-height:1.35;

}


.security-promise-path {

    display:flex;

    flex:0 0 auto;

    align-items:center;

    gap:10px;

}


.security-promise-path span {

    color:#dbeafe;

    font-size:11px;

    font-weight:800;

    letter-spacing:1px;

}


.security-promise-path i {

    display:block;

    width:28px;

    height:1px;

    background:#6366f1;

}

.security-section {

    position:relative;

    overflow:hidden;

    background:#f3f6fb;

}


.security-section::before {

    content:"";

    position:absolute;

    inset:0;

    background-image:
    linear-gradient(rgba(17,24,39,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,24,39,.035) 1px, transparent 1px);

    background-size:56px 56px;

    mask-image:linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);

    pointer-events:none;

}


.security-intro {

    display:grid;

    grid-template-columns:minmax(0, 1.15fr) minmax(320px, .85fr);

    gap:72px;

    align-items:end;

    margin-bottom:48px;

}


.security-intro .section-heading {

    margin-bottom:0;

}


.security-intro .section-heading h2 {

    max-width:760px;

}


.security-lead > p {

    margin-bottom:24px;

    color:#475467;

    font-size:18px;

    line-height:1.75;

}


.security-assurance {

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}


.security-assurance span {

    padding:9px 12px;

    border:1px solid rgba(99,102,241,.25);

    border-radius:6px;

    background:#fff;

    color:#344054;

    font-size:13px;

    font-weight:700;

}


.security-media {

    display:grid;

    grid-template-columns:minmax(0, 1.75fr) minmax(280px, .75fr);

    gap:18px;

    margin-bottom:24px;

}


.security-photo {

    position:relative;

    overflow:hidden;

    min-height:430px;

    margin:0;

    border-radius:8px;

    background:var(--navy);

    box-shadow:0 24px 70px rgba(16,24,40,.16);

}


.security-photo img {

    width:100%;

    height:100%;

    object-fit:cover;

    transition:transform .7s cubic-bezier(.2,.7,.2,1);

}


.security-photo-detail img {

    object-position:42% center;

}


.security-photo::after {

    content:"";

    position:absolute;

    inset:45% 0 0;

    background:linear-gradient(to bottom, transparent, rgba(2,8,23,.9));

    pointer-events:none;

}


.security-photo:hover img {

    transform:scale(1.035);

}


.security-photo figcaption {

    position:absolute;

    z-index:1;

    left:24px;

    right:24px;

    bottom:22px;

    color:white;

    font-size:15px;

    font-weight:700;

    line-height:1.45;

}


.security-architecture {

    position:relative;

    overflow:hidden;

    padding:42px;

    border-radius:8px;

    background:#111827;

    color:white;

    box-shadow:0 30px 75px rgba(16,24,40,.18);

}


.security-architecture::before {

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:3px;

    background:linear-gradient(90deg, #6366f1, #67e8f9, #6366f1);

}


.security-architecture-title {

    display:grid;

    grid-template-columns:220px minmax(0, 1fr);

    gap:32px;

    align-items:end;

    padding-bottom:32px;

    border-bottom:1px solid rgba(255,255,255,.14);

}


.security-architecture-title span,
.security-layer > span {

    color:#a5b4fc;

    font-size:12px;

    font-weight:800;

    letter-spacing:1.5px;

}


.security-architecture-title h3 {

    max-width:720px;

    margin:0;

    color:white;

    font-size:30px;

    font-weight:800;

}


.security-layers {

    display:grid;

    grid-template-columns:repeat(3, minmax(0, 1fr));

    padding-top:36px;

}


.security-layer {

    position:relative;

    min-width:0;

    padding:0 34px;

}


.security-layer:first-child {

    padding-left:0;

}


.security-layer:last-child {

    padding-right:0;

}


.security-layer + .security-layer {

    border-left:1px solid rgba(255,255,255,.14);

}


.security-layer-marker {

    display:flex;

    width:42px;

    height:42px;

    align-items:center;

    justify-content:center;

    margin-bottom:26px;

    border:1px solid #6366f1;

    border-radius:50%;

    background:#1f2937;

    color:white;

    font-size:13px;

    font-weight:800;

    transition:background .3s ease, transform .3s ease;

}


.security-layer:hover .security-layer-marker {

    transform:translateY(-4px);

    background:#4f46e5;

}


.security-layer h4 {

    margin:12px 0 14px;

    color:white;

    font-size:23px;

    font-weight:800;

    line-height:1.3;

}


.security-layer p {

    margin:0;

    color:#cbd5e1;

    font-size:15px;

    line-height:1.7;

}



.funding-card {


    min-height:135px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:26px;

    background:white;

    border:1px solid rgba(255,255,255,.2);

    border-radius:20px;

    box-shadow:
    0 20px 45px rgba(0,0,0,.18);


}



.funding-card img {


    max-width:100%;

    max-height:78px;

    object-fit:contain;


}



.funding-text-logo span {


    color:#1f2a60;

    font-size:38px;

    font-weight:800;

    letter-spacing:1px;


}



/*  EVENTS  */


.events-grid {


    display:grid;

    grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

    gap:26px;


}



.event-card {


    overflow:hidden;

    background:white;

    border:1px solid var(--border);

    border-radius:20px;

    box-shadow:
    0 18px 45px rgba(16,24,40,.08);

    transition:.35s;


}



.event-card:hover {


    transform:translateY(-8px);

    border-color:var(--blue);


}



.event-card img {


    width:100%;

    aspect-ratio:4 / 3;

    object-fit:cover;

    display:block;


}



.event-card div {


    padding:24px;


}



.event-card h4 {


    margin-bottom:10px;

    color:var(--navy);

    font-weight:800;


}



.event-card p {


    color:var(--grey);

    line-height:1.65;

    margin-bottom:0;


}



/*  TIMELINE  */


.timeline {


    border-left:

    2px solid rgba(255,255,255,.3);


}



.timeline div {


    padding:25px;

    position:relative;


}



.timeline div::before {


    content:"";


    position:absolute;


    left:-11px;


    top:30px;


    width:18px;


    height:18px;


    background:var(--blue);


    border-radius:50%;


}








/* 
   TEAM
 */



.team-member {


    display:flex;


    align-items:center;


    gap:40px;


}



.team-member img {


    width:220px;


    height:220px;


    object-fit:cover;


    border-radius:50%;


    border:

    5px solid var(--blue);


}






/* Team card grid */


.team-grid {


    display:grid;

    grid-template-columns:
    repeat(auto-fit, minmax(280px, 1fr));

    gap:28px;


}



.team-member {


    gap:24px;

    min-width:0;

    padding:24px;

    background:#ffffff;

    border:1px solid var(--border);

    border-radius:20px;

    box-shadow:
    0 18px 45px rgba(16,24,40,.08);

    transition:.35s;


}



.team-member:hover {


    transform:translateY(-8px);

    border-color:var(--blue);


}



.team-member img {


    width:150px;

    height:150px;

    flex:0 0 150px;


}



.team-avatar {


    width:150px;

    height:150px;

    flex:0 0 150px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    border:5px solid var(--blue);

    background:
    linear-gradient(135deg, #eef2ff, #dff7ff);

    color:var(--blue);

    font-size:42px;

    font-weight:800;


}



.team-copy {


    min-width:0;


}



.team-copy h3 {


    color:var(--navy);

    font-size:30px;

    line-height:1.18;

    font-weight:700;

    margin-bottom:12px;

    overflow-wrap:anywhere;


}



.team-copy p {


    margin-bottom:0;

    color:#020817;

    font-size:18px;

    line-height:1.45;


}





/* 
   SCROLL ANIMATION
 */


.reveal {


    opacity:0;


    transform:

    translateY(40px);


    transition:

    all .8s ease;


}



.reveal.active {


    opacity:1;


    transform:

    translateY(0);


}


@media(prefers-reduced-motion:reduce){

    html {

        scroll-behavior:auto;

    }

    .reveal,
    .security-photo img,
    .security-layer-marker {

        transition:none;

    }

}









/* 
   FOOTER
 */


.funding-logo-ukri img {

    max-height:105px;

}



.funding-logo-dsit img {

    max-height:112px;

}

.funding-logo-ICO img {

    max-height:112px;

}

.funding-card {

    transition:
    transform .35s ease,
    box-shadow .35s ease;

}



.funding-card:hover {

    transform:translateY(-8px);

    box-shadow:
    0 28px 70px rgba(0,0,0,.24);

}



.team-grid {

    grid-template-columns:
    repeat(4, minmax(0, 1fr));

    gap:24px;

}



.team-member {

    position:relative;

    flex-direction:column;

    justify-content:flex-start;

    min-height:390px;

    padding:34px 24px 30px;

    text-align:center;

    overflow:hidden;

    background:
    linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);

}



.team-member::before {

    content:"";

    position:absolute;

    inset:0 0 auto 0;

    height:110px;

    background:
    linear-gradient(135deg, rgba(99,102,241,.18), rgba(165,243,252,.18));

    opacity:0;

    transition:opacity .35s ease;

}



.team-member:hover::before {

    opacity:1;

}



.team-member img,
.team-avatar {

    width:170px;

    height:170px;

    flex:0 0 170px;

    position:relative;

    z-index:1;

    box-shadow:
    0 18px 40px rgba(99,102,241,.18);

}



.team-copy {

    position:relative;

    z-index:1;

    width:100%;

    margin-top:22px;

}



.team-copy h3 {

    max-width:260px;

    margin-left:auto;

    margin-right:auto;

    font-size:26px;

    line-height:1.15;

    overflow-wrap:normal;

    word-break:normal;

}



.team-copy p {

    color:#475467;

    font-weight:500;

}



.why-section {

    position:relative;

    overflow:hidden;

}



.why-section::before {

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-160px;

    top:-120px;

    border-radius:50%;

    background:radial-gradient(circle, rgba(99,102,241,.24), transparent 68%);

}



.why-layout {

    display:grid;

    grid-template-columns:
    minmax(0, 1.05fr) minmax(360px, .95fr);

    align-items:center;

    gap:56px;

}



.why-copy > p {

    color:#d0d5dd;

    max-width:760px;

    line-height:1.8;

    margin-top:-30px;

    margin-bottom:42px;

}



.why-points {

    display:grid;

    grid-template-columns:
    repeat(2, minmax(0, 1fr));

    gap:18px;

}



.why-points div {

    padding:22px;

    border:1px solid rgba(255,255,255,.12);

    border-radius:18px;

    background:rgba(255,255,255,.05);

    transition:
    transform .35s ease,
    background .35s ease,
    border-color .35s ease;

}



.why-points div:hover {

    transform:translateY(-6px);

    background:rgba(255,255,255,.09);

    border-color:rgba(165,243,252,.45);

}



.why-points h3 {

    font-size:34px;

    font-weight:800;

    margin-bottom:10px;

}



.why-points p {

    margin-bottom:0;

    color:white;

}



.why-visual img {

    width:100%;

    display:block;

    border-radius:28px;

    box-shadow:
    0 35px 90px rgba(0,0,0,.32);

}



.contact-hero {

    min-height:100vh;

    display:flex;

    align-items:center;

    padding:150px 0 90px;

    background:
    radial-gradient(circle at top right, rgba(99,102,241,.18), transparent 34%),
    linear-gradient(180deg, #ffffff, #f4f7ff);

}



.contact-layout {

    display:grid;

    grid-template-columns:
    minmax(0, .9fr) minmax(360px, 1.1fr);

    gap:48px;

    align-items:center;

}



.contact-panel {

    padding:36px;

    border:1px solid var(--border);

    border-radius:26px;

    background:rgba(255,255,255,.86);

    box-shadow:
    0 30px 80px rgba(16,24,40,.12);

    backdrop-filter:blur(16px);

}



.contact-panel label {

    display:block;

    margin-bottom:8px;

    color:var(--navy);

    font-weight:700;

}



.contact-panel input,
.contact-panel textarea {

    width:100%;

    margin-bottom:20px;

    padding:15px 16px;

    border:1px solid #d0d5dd;

    border-radius:14px;

    color:var(--navy);

    outline:none;

    transition:
    border-color .25s ease,
    box-shadow .25s ease;

}



.contact-layout .hero-description {

    color:#667085;

    font-size:20px;

    font-weight:500;

    letter-spacing:0;

    line-height:1.7;

}



.contact-panel .main-btn {

    border:0;

    cursor:pointer;

}



.contact-panel input:focus,
.contact-panel textarea:focus {

    border-color:var(--blue);

    box-shadow:
    0 0 0 4px rgba(99,102,241,.14);

}



.contact-panel textarea {

    min-height:170px;

    resize:vertical;

}


footer {


    background:#020817;


    color:white;


    padding:30px;


    text-align:center;


}








/* 
   MOBILE
 */


@media(max-width:992px){


.hero h1 {


    font-size:45px;


}



.solution-box,
.reverse {


    flex-direction:column;


}



.solution-box img {


    width:100%;


}


.capability-grid,
.why-layout,
.contact-layout {

    grid-template-columns:1fr;

}


.security-intro {

    grid-template-columns:1fr;

    gap:24px;

}


.security-media {

    grid-template-columns:1fr 1fr;

}


.security-photo {

    min-height:340px;

}


.security-promise-inner,
.security-promise-copy {

    align-items:flex-start;

    flex-direction:column;

    gap:18px;

}


.security-architecture-title {

    grid-template-columns:1fr;

    gap:14px;

}


.security-layers {

    grid-template-columns:1fr;

}


.security-layer,
.security-layer:first-child,
.security-layer:last-child {

    padding:30px 0;

}


.security-layer + .security-layer {

    border-top:1px solid rgba(255,255,255,.14);

    border-left:0;

}



.team-grid {

    grid-template-columns:
    repeat(2, minmax(0, 1fr));

}



.why-copy > p {

    margin-top:0;

}



.team-member {


    flex-direction:column;

    text-align:center;


}


}


@media(max-width:576px){


.navbar {

    padding:12px 0;

}


.navbar-brand {

    font-size:20px;

}


.navbar-brand img {

    width:50px;

    height:46px;

    object-fit:cover;

}


.navbar-toggler {

    padding:6px 9px;

}


.section {

    padding:80px 0;

}



.section-heading h2 {

    font-size:34px;

}



.hero h1 {

    font-size:40px;

}



.team-grid,
.why-points {

    grid-template-columns:1fr;

}


.security-media {

    grid-template-columns:1fr;

}


.events-grid {

    grid-template-columns:minmax(0, 1fr);

}


.security-photo {

    min-height:280px;

}


.security-promise {

    padding:30px 0;

}


.security-promise h2 {

    font-size:22px;

}


.security-promise-path {

    width:100%;

    justify-content:space-between;

}


.security-promise-path i {

    flex:1;

}


.security-architecture {

    padding:30px 24px;

}


.security-architecture-title h3 {

    font-size:25px;

}



.team-member {

    min-height:auto;

}



.funding-card {

    min-height:120px;

}



.contact-hero {

    padding-top:130px;

}


}