:root{
    --bg:#07111f;
    --surface:#101c2f;
    --surface-soft:#15233d;
    --muted:#94a3b8;
    --text:#f8fbff;
    --text-soft:#b8c5d8;
    --accent:#7c3aed;
    --accent-2:#06b6d4;
    --border:rgba(255,255,255,0.08);
    --radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:radial-gradient(circle at top, rgba(124,58,237,0.16), transparent 38%), linear-gradient(180deg,#07111f 0%,#0b1321 100%);color:var(--text);line-height:1.7}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.container{max-width:1140px;margin:0 auto;padding:2rem 1.5rem}
.site-header{position:sticky;top:0;z-index:50;background:rgba(7,17,31,0.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.05)}
.nav-container{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.5rem 0}
.brand{display:flex;align-items:center;justify-content:center;height:84px;transition:.25s ease;margin-right:0.25rem}
.logo-image{height:100%;width:auto;max-width:none;max-height:84px;object-fit:contain;display:block;margin:0 0.25rem}
.brand:hover .logo-image{opacity:.85;transform:scale(1.02)}
.main-nav{display:flex;gap:1rem;align-items:center}
.main-nav a{color:var(--text-soft);padding:.75rem 1rem;border-radius:14px;transition:.25s ease}
.main-nav a:hover{color:#fff;background:rgba(255,255,255,0.06)}
.nav-toggle{display:none;appearance:none;border:none;background:transparent;color:var(--text)}
.nav-toggle span{display:block;width:22px;height:3px;background:var(--text);border-radius:999px;margin:5px 0}
.hero{position:relative;padding:6rem 0 3.5rem;overflow:visible}
.fade-up{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease}

/* Capabilities background removed per request; no background image applied here */
.fade-up.visible{opacity:1;transform:translateY(0)}
.hero-grid{display:grid;grid-template-columns:1fr 480px;gap:2.5rem;align-items:center}
.hero-copy{max-width:640px}
.hero-copy .eyebrow{display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:1rem}
.hero-copy h1{font-size:3rem;line-height:1.03;margin:0 0 1.25rem;max-width:680px}
.hero-copy .lead{color:var(--text-soft);font-size:1.05rem;max-width:680px;margin-bottom:2rem}
.hero-actions{display:flex;flex-wrap:wrap;gap:1rem;margin-bottom:2rem}
.hero-highlights{display:grid;gap:.75rem;color:var(--text-soft);font-size:.95rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.95rem 1.4rem;font-weight:600;border-radius:14px;transition:.25s ease}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 18px 40px rgba(124,58,237,0.18)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{border:1px solid rgba(255,255,255,0.12);color:var(--text);background:rgba(255,255,255,0.04)}
.btn.large{padding:1rem 1.6rem;font-size:1rem}
.hero-visual{position:relative;min-height:420px}
.visual-surface{position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,58,237,0.18),rgba(6,182,212,0.08));border:1px solid rgba(255,255,255,0.08);border-radius:32px;box-shadow:0 32px 80px rgba(0,0,0,0.18)}
.visual-card{position:absolute;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:28px;backdrop-filter:blur(18px);box-shadow:0 20px 45px rgba(0,0,0,0.2)}
.visual-card-top{top:4%;left:10%;width:48%;height:120px;animation:float 5s ease-in-out infinite}
.visual-card-mid{top:30%;right:6%;width:52%;height:180px;animation:float 6s ease-in-out infinite .3s}
.visual-card-bottom{bottom:8%;left:18%;width:58%;height:140px;animation:float 5.5s ease-in-out infinite .6s}
.visual-dot{position:absolute;background:linear-gradient(180deg,rgba(124,58,237,0.95),rgba(6,182,212,0.8));border-radius:50%;box-shadow:0 18px 50px rgba(7,16,33,0.35)}
.dot-1{top:16%;right:20%;width:22px;height:22px}
.dot-2{top:52%;left:22%;width:16px;height:16px}
.dot-3{bottom:16%;right:28%;width:18px;height:18px}
.section{padding:4rem 0}
.section-header{max-width:720px;margin-bottom:2rem}
.section-header .eyebrow{display:inline-block;font-size:.82rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:.8rem}
.section-header h2{margin:0;font-size:2.35rem;line-height:1.1}
.capabilities-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.capability-card{padding:1.2rem 1.1rem;border-radius:22px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);color:var(--text);transition:.25s ease;cursor:default}
.capability-card:hover{transform:translateY(-4px);border-color:rgba(124,58,237,0.3);background:rgba(255,255,255,0.06)}
.skills-panel{display:grid;grid-template-columns:1fr 1.2fr;gap:2rem;align-items:center}
.skills-copy h2{margin-top:0}
.skills-copy p{max-width:620px;color:var(--text-soft)}
.skills-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}
.skill-chip{display:flex;align-items:center;justify-content:center;padding:.95rem 1rem;border-radius:5px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);color:var(--text);font-weight:600;transition:.25s ease}
.skill-chip:hover{transform:translateY(-2px);background:rgba(255,255,255,0.09)}
.ai-section{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:center}
.ai-visual{position:relative;min-height:360px}
.ai-shape{position:absolute;border-radius:32px;mix-blend-mode:screen}
.ai-shape-large{top:0;left:10%;width:72%;height:260px;background:linear-gradient(135deg,rgba(124,58,237,0.3),rgba(6,182,212,0.18))}
.ai-shape-small{bottom:0;right:0;width:50%;height:180px;background:linear-gradient(135deg,rgba(6,182,212,0.32),rgba(124,58,237,0.14))}
.ai-overlay{position:absolute;inset:15%;border:1px solid rgba(255,255,255,0.08);border-radius:30px;background:rgba(255,255,255,0.02);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.03)}
.feature-list{display:grid;gap:.9rem;padding-left:1.1rem;margin-top:1.5rem;color:var(--text-soft)}
.feature-list li{position:relative;padding-left:1.2rem;line-height:1.8}
.feature-list li:before{content:'•';position:absolute;left:0;top:0;color:var(--accent)}
.process-grid-7{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.process-step{padding:1.4rem 1.2rem;border-radius:24px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);display:grid;gap:.75rem}
.process-step span{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border-radius:999px;background:rgba(124,58,237,0.2);color:var(--accent);font-weight:700}
.process-step strong{font-size:1rem}
.why-grid{display:grid;gap:2rem}
.why-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.why-card{padding:1.5rem;transition:.25s ease}
.why-card:hover{transform:translateY(-3px);border-color:rgba(124,58,237,0.25);background:rgba(255,255,255,0.05)}
.cta-panel{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;background:rgba(124,58,237,0.12);border:1px solid rgba(124,58,237,0.18);border-radius:28px;padding:2rem}
.cta-panel h2{margin:0;max-width:780px}
/* About page top section background + overlay */
.about-hero{
    position:relative;
    padding:5.25rem 0 3rem;
    background-image: url('/assets/images/KNK-bg-image.png');
    /* slightly smaller so more of the image is visible */
    background-size:50% auto;
    /* move image focal point upward by ~120px */
    background-position:center -120px;
    background-repeat:no-repeat;
    overflow:hidden;
}

.about-hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(7,17,31,0.72), rgba(7,17,31,0.5));
    z-index:0;
    pointer-events:none;
}

.about-hero .container{position:relative;z-index:1}

@media (max-width:1000px){
    .about-hero{background-size:70% auto;background-position:center -100px}
}

@media (max-width:720px){
    .about-hero{background-size:90% auto;background-position:center -60px}
}

.about-hero-grid{display:grid;grid-template-columns:1fr 380px;gap:2rem;align-items:start}
.about-hero-card{padding:1.75rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:26px}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.about-text-card{padding:1.8rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:24px}
.about-focus-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.focus-card{padding:1.5rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:24px}
.values-section{padding-top:2rem;background-image:url('/assets/images/security-image.jpg');background-size:cover;background-position:center;background-repeat:no-repeat;text-align:center}
.values-section > .eyebrow{display:inline-block;font-size:1rem;font-weight:900;letter-spacing:0.22em;text-transform:uppercase;color:var(--accent);margin-bottom:0.9rem;padding:.25rem .75rem;background:rgba(124,58,237,0.08);border-radius:999px}
.values-section > h2{margin:0 auto 0.9rem;font-size:2.35rem;line-height:1.06;font-weight:800;max-width:760px;letter-spacing:.01em;color:#ffffff;text-shadow:0 8px 28px rgba(0,0,0,0.28)}
.values-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem;align-items:start}
.value-card{padding:1.75rem;line-height:1.8;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:26px;box-shadow:0 14px 36px rgba(0,0,0,0.18);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.value-card:hover{transform:translateY(-6px);border-color:rgba(124,58,237,0.36);box-shadow:0 22px 50px rgba(0,0,0,0.22)}
.contact-hero-grid{display:grid;grid-template-columns:1.2fr 0.8fr;gap:2rem;align-items:start}
.contact-hero-panel{padding:1.75rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:24px}
.contact-hero-panel ul{padding-left:1.25rem;margin:1rem 0 0;color:var(--text-soft)}
.contact-hero-panel li{margin-bottom:.75rem;line-height:1.8}
.contact-grid{display:grid;grid-template-columns:1.4fr 0.8fr;gap:2rem;align-items:start}
.form{display:grid;gap:1rem}
.form-row{display:grid;gap:.6rem;margin-bottom:1rem}
.form label{font-weight:600;color:var(--text)}
.form input,.form textarea{width:100%;padding:1rem;border-radius:16px;border:1px solid rgba(255,255,255,0.08);background:rgba(255,255,255,0.04);color:var(--text);font:inherit}
.form textarea{min-height:180px;resize:vertical}
.form-error{color:#ffb4b4;font-size:.95rem}
.alert{border-radius:16px;padding:1rem 1.25rem;border:1px solid rgba(34,197,94,0.25);background:rgba(34,197,94,0.12);color:#d1fae5;margin-bottom:1.25rem}
.contact-info-panel{display:grid;gap:1rem}
.contact-info-card{padding:1.75rem;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);border-radius:24px}
.contact-info-card p{color:var(--text-soft);line-height:1.75}
.info-row{display:grid;gap:.25rem}
.info-row span{font-size:.88rem;font-weight:700;color:var(--accent)}
.info-row a{color:var(--text);word-break:break-word}
.footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:2rem;padding:3rem 0}
.footer-grid h4,h5{margin:0 0 .85rem}
.footer-grid p, .footer-grid li, .footer-grid a{color:var(--text-soft);font-size:.95rem;line-height:1.8}
.footer-grid ul{padding:0;margin:0;list-style:none}
.footer-bottom{text-align:center;padding:1rem 0;border-top:1px solid rgba(255,255,255,0.08);color:var(--text-soft)}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media (max-width:1000px) {
    .hero-grid,
    .skills-panel,
    .ai-section,
    .contact-grid,
    .about-hero-grid {
        grid-template-columns: 1fr;
    }
    .capabilities-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .process-grid-7 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .why-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .footer-grid {
        grid-template-columns: 1fr;
    }
    .about-hero {
        background-size: 70% auto;
        background-position: center -100px;
    }
}

@media (max-width:720px) {
    .container { padding: 1.5rem; }
    .section { padding: 2.25rem 0; }
    .hero { padding: 4rem 0 2rem; }
    .about-hero { padding: 4rem 0 2rem; background-size: 90% auto; background-position: center -60px; }
    .hero-copy h1 { font-size: 2.1rem; }
    .section-header h2 { font-size: 1.95rem; }
    .section-header .eyebrow { font-size: .82rem; }
    .capabilities-grid { grid-template-columns: 1fr; }
    .skills-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .process-grid-7 { grid-template-columns: 1fr; }
    .about-grid { grid-template-columns: 1fr; }
    .about-focus-grid { grid-template-columns: 1fr; }
    .why-cards { grid-template-columns: 1fr; }
    .values-grid { grid-template-columns: 1fr; }
    .values-section { padding-top: 1.75rem; }
    .values-section > h2 { font-size: 1.6rem; }
    .value-card { max-width: 100%; width: 100%; }
    .footer-grid { grid-template-columns: 1fr; }
    .contact-hero-grid { grid-template-columns: 1fr; }
    .main-nav { display: none; position: absolute; top: 100%; right: 1rem; width: calc(100% - 2rem); flex-direction: column; padding: 1rem; background: rgba(7,17,31,0.96); border: 1px solid rgba(255,255,255,0.08); border-radius: 22px; box-shadow: 0 30px 70px rgba(1,5,14,0.45); }
    .main-nav a { display: block; width: 100%; padding: .95rem 1rem; }
    .main-nav.active { display: flex; }
    .nav-toggle { display: block; }
    .brand { height: 72px; }
    .logo-image { max-height: 72px; }
}

@media (max-width:540px) {
    .section { padding: 1.75rem 0; }
    .hero { padding: 3rem 0 1.5rem; }
    .about-hero { padding: 3rem 0 1.5rem; }
    .hero-copy h1 { font-size: 1.85rem; }
    .hero-copy .lead { font-size: 0.98rem; }
    .section-header h2 { font-size: 1.6rem; }
    .section-header .eyebrow { font-size: .78rem; }
    .skill-chip { font-size: .95rem; padding: .7rem .9rem; }
    .contact-info-card { padding: 1rem; }
    .hero-visual { min-height: 240px; }
    .ai-visual { min-height: 220px; }
    .cta-panel { padding: 1rem; }
    .contact-grid { gap: 1rem; grid-template-columns: 1fr; }
    .process-step { padding: 1rem; }
    .why-card { padding: 1rem; }
    .values-section > h2 { font-size: 1.45rem; }
    .values-section .eyebrow { font-size: .85rem; }
    .values-grid { gap: 1rem; }
    .value-card { padding: 1rem; border-radius: 18px; }
}

@media (max-width:420px) {
    .container { padding: 1rem; }
    .hero-copy h1 { font-size: 1.6rem; }
    .section-header h2 { font-size: 1.45rem; }
    .values-section > h2 { font-size: 1.2rem; }
    .values-section { padding-top: 1rem; }
    .values-grid { grid-template-columns: 1fr; }
    .value-card { padding: .9rem; }
    .logo-image { max-height: 60px; }
}