Home Attachments

Embed Snippet on Your Site

<script src="https://library.wpcode.com/embedjs/m5lrn7l5.js/"></script>

KinTech template

Fonki Jinklins

<10

Code Preview

Comments

html


	`<!DOCTYPE html>`

	`<html lang="en">`
	`<head>`
	`<meta charset="UTF-8"/>`
	`<meta name="viewport" content="width=device-width, initial-scale=1.0"/>`
	`<title>KinTech Cybersecurity Solutions</title>`
	`<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow:wght@300;400;600;700;900&family=Barlow+Condensed:wght@700;900&display=swap" rel="stylesheet"/>`
	`<style>`
	`:root{`
	`--bg: #080c1a;`
	`--bg2: #0d1428;`
	`--bg3: #111c35;`
	`--cyan: #00d4ff;`
	`--mint: #00ffa0;`
	`--red: #ff3a3a;`
	`--white: #f0f4ff;`
	`--gray: #6b7fa3;`
	`--lgray: #a0b0cc;`
	`--border: rgba(0,212,255,0.18);`
	`--glow: 0 0 24px rgba(0,212,255,0.35);`
	`--font-display: 'Barlow Condensed', sans-serif;`
	`--font-body: 'Barlow', sans-serif;`
	`--font-mono: 'Share Tech Mono', monospace;`
	`}`
	`*{margin:0;padding:0;box-sizing:border-box;}`
	`html{scroll-behavior:smooth;}`

	`body{`
	`background:var(–bg);`
	`color:var(–white);`
	`font-family:var(–font-body);`
	`overflow-x:hidden;`
	`cursor:none;`
	`}`

	`/* ── CUSTOM CURSOR ─────────────────────────────────────────── */`
	`.cursor{`
	`position:fixed;width:12px;height:12px;`
	`background:var(–cyan);border-radius:50%;`
	`pointer-events:none;z-index:9999;`
	`transform:translate(-50%,-50%);`
	`transition:transform .1s,opacity .2s;`
	`box-shadow:0 0 12px var(–cyan);`
	`}`
	`.cursor-ring{`
	`position:fixed;width:36px;height:36px;`
	`border:1.5px solid rgba(0,212,255,0.5);`
	`border-radius:50%;pointer-events:none;z-index:9998;`
	`transform:translate(-50%,-50%);`
	`transition:transform .18s ease,width .2s,height .2s;`
	`}`

	`/* ── GRID OVERLAY ──────────────────────────────────────────── */`
	`body::before{`
	`content:’’;position:fixed;inset:0;`
	`background-image:`
	`linear-gradient(rgba(0,212,255,.04) 1px, transparent 1px),`
	`linear-gradient(90deg, rgba(0,212,255,.04) 1px, transparent 1px);`
	`background-size:60px 60px;`
	`pointer-events:none;z-index:0;`
	`}`

	`/* ── NAV ───────────────────────────────────────────────────── */`
	`nav{`
	`position:fixed;top:0;left:0;right:0;z-index:100;`
	`display:flex;align-items:center;justify-content:space-between;`
	`padding:0 48px;height:72px;`
	`background:rgba(8,12,26,0.85);`
	`backdrop-filter:blur(16px);`
	`border-bottom:1px solid var(–border);`
	`}`
	`.nav-logo{`
	`display:flex;align-items:center;gap:12px;`
	`text-decoration:none;`
	`}`
	`.nav-logo .badge{`
	`width:40px;height:40px;`
	`border:2px solid var(–cyan);`
	`border-radius:8px;`
	`display:flex;align-items:center;justify-content:center;`
	`font-family:var(–font-mono);`
	`font-size:14px;color:var(–cyan);`
	`box-shadow:var(–glow);`
	`}`
	`.nav-logo .wordmark{`
	`font-family:var(–font-display);`
	`font-size:22px;font-weight:900;`
	`letter-spacing:.08em;color:var(–white);`
	`}`
	`.nav-logo .wordmark span{color:var(–cyan);}`
	`.nav-links{display:flex;gap:32px;list-style:none;}`
	`.nav-links a{`
	`font-family:var(–font-mono);font-size:12px;`
	`color:var(–gray);text-decoration:none;`
	`letter-spacing:.1em;text-transform:uppercase;`
	`transition:color .2s;`
	`}`
	`.nav-links a:hover{color:var(–cyan);}`
	`.nav-cta{`
	`padding:10px 24px;`
	`border:1.5px solid var(–cyan);`
	`background:transparent;`
	`color:var(–cyan);font-family:var(–font-mono);`
	`font-size:12px;letter-spacing:.1em;`
	`text-transform:uppercase;text-decoration:none;`
	`cursor:none;`
	`transition:background .2s,box-shadow .2s,color .2s;`
	`}`
	`.nav-cta:hover{`
	`background:var(–cyan);color:var(–bg);`
	`box-shadow:var(–glow);`
	`}`

	`/* ── HERO ──────────────────────────────────────────────────── */`
	`#hero{`
	`min-height:100vh;`
	`display:flex;align-items:center;`
	`padding:120px 48px 80px;`
	`position:relative;overflow:hidden;`
	`}`
	`.hero-orb{`
	`position:absolute;`
	`border-radius:50%;filter:blur(80px);pointer-events:none;`
	`}`
	`.orb-1{`
	`width:600px;height:600px;`
	`background:radial-gradient(circle, rgba(0,212,255,.12) 0%, transparent 70%);`
	`top:-100px;right:-100px;`
	`}`
	`.orb-2{`
	`width:400px;height:400px;`
	`background:radial-gradient(circle, rgba(0,255,160,.08) 0%, transparent 70%);`
	`bottom:0;left:200px;`
	`}`
	`.hero-content{`
	`position:relative;z-index:1;`
	`max-width:780px;`
	`}`
	`.hero-tag{`
	`display:inline-flex;align-items:center;gap:10px;`
	`font-family:var(–font-mono);font-size:11px;`
	`color:var(–cyan);letter-spacing:.15em;`
	`text-transform:uppercase;margin-bottom:28px;`
	`}`
	`.hero-tag::before{`
	`content:’’;width:32px;height:1.5px;background:var(–cyan);`
	`}`
	`.hero-h1{`
	`font-family:var(–font-display);`
	`font-size:clamp(56px,8vw,110px);`
	`font-weight:900;line-height:.92;`
	`letter-spacing:-.01em;`
	`margin-bottom:28px;`
	`}`
	`.hero-h1 .line2{color:var(–cyan);display:block;}`
	`.hero-h1 .line3{`
	`-webkit-text-stroke:1.5px rgba(0,212,255,0.5);`
	`color:transparent;display:block;`
	`}`
	`.hero-desc{`
	`font-size:16px;font-weight:300;line-height:1.8;`
	`color:var(–lgray);max-width:540px;margin-bottom:48px;`
	`}`
	`.hero-btns{display:flex;gap:16px;flex-wrap:wrap;}`
	`.btn-primary{`
	`padding:16px 40px;`
	`background:var(–cyan);color:var(–bg);`
	`font-family:var(–font-mono);font-size:13px;`
	`letter-spacing:.1em;text-transform:uppercase;`
	`text-decoration:none;font-weight:700;`
	`transition:box-shadow .2s,transform .15s;`
	`cursor:none;`
	`}`
	`.btn-primary:hover{`
	`box-shadow:0 0 40px rgba(0,212,255,.5);`
	`transform:translateY(-2px);`
	`}`
	`.btn-outline{`
	`padding:16px 40px;`
	`border:1.5px solid var(–border);`
	`color:var(–white);`
	`font-family:var(–font-mono);font-size:13px;`
	`letter-spacing:.1em;text-transform:uppercase;`
	`text-decoration:none;`
	`transition:border-color .2s,color .2s;`
	`cursor:none;`
	`}`
	`.btn-outline:hover{border-color:var(–cyan);color:var(–cyan);}`

	`.hero-stats{`
	`position:absolute;right:48px;top:50%;`
	`transform:translateY(-50%);`
	`display:flex;flex-direction:column;gap:40px;`
	`z-index:1;`
	`}`
	`.stat-item{text-align:right;}`
	`.stat-num{`
	`font-family:var(–font-display);`
	`font-size:48px;font-weight:900;`
	`color:var(–cyan);line-height:1;`
	`}`
	`.stat-label{`
	`font-family:var(–font-mono);`
	`font-size:10px;color:var(–gray);`
	`letter-spacing:.12em;text-transform:uppercase;`
	`margin-top:4px;`
	`}`

	`/* scrolling ticker */`
	`.ticker{`
	`background:var(–bg3);`
	`border-top:1px solid var(–border);`
	`border-bottom:1px solid var(–border);`
	`overflow:hidden;padding:14px 0;`
	`position:relative;z-index:1;`
	`}`
	`.ticker-inner{`
	`display:flex;gap:0;`
	`animation:ticker 20s linear infinite;`
	`white-space:nowrap;`
	`}`
	`.ticker-item{`
	`font-family:var(–font-mono);font-size:11px;`
	`color:var(–gray);letter-spacing:.12em;`
	`text-transform:uppercase;`
	`padding:0 40px;`
	`border-right:1px solid var(–border);`
	`}`
	`.ticker-item span{color:var(–cyan);}`
	`@keyframes ticker{`
	`0%{transform:translateX(0);}`
	`100%{transform:translateX(-50%);}`
	`}`

	`/* ── SERVICES ──────────────────────────────────────────────── */`
	`#services{`
	`padding:120px 48px;`
	`position:relative;`
	`}`
	`.section-tag{`
	`font-family:var(–font-mono);font-size:11px;`
	`color:var(–cyan);letter-spacing:.15em;`
	`text-transform:uppercase;margin-bottom:16px;`
	`display:flex;align-items:center;gap:12px;`
	`}`
	`.section-tag::after{`
	`content:’’;flex:1;max-width:60px;`
	`height:1px;background:var(–cyan);opacity:.5;`
	`}`
	`.section-h2{`
	`font-family:var(–font-display);`
	`font-size:clamp(36px,5vw,64px);`
	`font-weight:900;margin-bottom:72px;`
	`line-height:1;`
	`}`
	`.services-grid{`
	`display:grid;`
	`grid-template-columns:repeat(auto-fit,minmax(280px,1fr));`
	`gap:2px;`
	`}`
	`.service-card{`
	`background:var(–bg2);`
	`padding:40px 32px;`
	`border:1px solid var(–border);`
	`position:relative;overflow:hidden;`
	`transition:border-color .3s,background .3s;`
	`cursor:none;`
	`}`
	`.service-card::before{`
	`content:’’;position:absolute;`
	`top:0;left:0;right:0;height:2px;`
	`background:var(–cyan);`
	`transform:scaleX(0);transform-origin:left;`
	`transition:transform .3s;`
	`}`
	`.service-card:hover{`
	`background:var(–bg3);`
	`border-color:rgba(0,212,255,.4);`
	`}`
	`.service-card:hover::before{transform:scaleX(1);}`
	`.service-icon{`
	`font-size:32px;margin-bottom:24px;`
	`display:block;`
	`}`
	`.service-num{`
	`position:absolute;top:24px;right:24px;`
	`font-family:var(–font-mono);font-size:11px;`
	`color:rgba(0,212,255,.25);letter-spacing:.1em;`
	`}`
	`.service-title{`
	`font-family:var(–font-display);`
	`font-size:24px;font-weight:700;`
	`margin-bottom:12px;`
	`}`
	`.service-desc{`
	`font-size:14px;line-height:1.7;`
	`color:var(–lgray);`
	`}`
	`.service-link{`
	`display:inline-flex;align-items:center;gap:8px;`
	`margin-top:24px;`
	`font-family:var(–font-mono);font-size:11px;`
	`color:var(–cyan);text-decoration:none;`
	`letter-spacing:.1em;text-transform:uppercase;`
	`transition:gap .2s;cursor:none;`
	`}`
	`.service-link:hover{gap:14px;}`

	`/* ── WHY KINTECH ───────────────────────────────────────────── */`
	`#why{`
	`padding:120px 48px;`
	`background:var(–bg2);`
	`position:relative;`
	`overflow:hidden;`
	`}`
	`#why::before{`
	`content:’’;position:absolute;`
	`right:-200px;top:50%;transform:translateY(-50%);`
	`width:700px;height:700px;`
	`border:1px solid var(–border);border-radius:50%;`
	`}`
	`#why::after{`
	`content:’’;position:absolute;`
	`right:-100px;top:50%;transform:translateY(-50%);`
	`width:500px;height:500px;`
	`border:1px solid rgba(0,212,255,.08);border-radius:50%;`
	`}`
	`.why-grid{`
	`display:grid;grid-template-columns:1fr 1fr;`
	`gap:80px;align-items:center;`
	`position:relative;z-index:1;`
	`}`
	`.why-visual{`
	`position:relative;`
	`display:flex;align-items:center;justify-content:center;`
	`height:420px;`
	`}`
	`.shield-svg{`
	`width:240px;height:auto;`
	`filter:drop-shadow(0 0 30px rgba(0,212,255,.4));`
	`}`
	`.why-ring{`
	`position:absolute;`
	`border:1px dashed rgba(0,212,255,.2);`
	`border-radius:50%;animation:spin 20s linear infinite;`
	`}`
	`.why-ring:nth-child(1){width:320px;height:320px;}`
	`.why-ring:nth-child(2){width:420px;height:420px;animation-direction:reverse;animation-duration:30s;}`
	`@keyframes spin{to{transform:rotate(360deg);}}`
	`.why-dot{`
	`position:absolute;width:8px;height:8px;`
	`background:var(–cyan);border-radius:50%;`
	`box-shadow:0 0 12px var(–cyan);`
	`top:0;left:50%;transform:translateX(-50%);`
	`}`
	`.feature-list{display:flex;flex-direction:column;gap:28px;}`
	`.feature-item{`
	`display:flex;gap:20px;align-items:flex-start;`
	`padding-bottom:28px;border-bottom:1px solid var(–border);`
	`}`
	`.feature-item:last-child{border-bottom:none;padding-bottom:0;}`
	`.feature-icon{`
	`width:48px;height:48px;flex-shrink:0;`
	`border:1px solid var(–border);`
	`display:flex;align-items:center;justify-content:center;`
	`font-size:20px;color:var(–cyan);`
	`background:var(–bg);`
	`}`
	`.feature-text h4{`
	`font-family:var(–font-display);`
	`font-size:18px;font-weight:700;margin-bottom:4px;`
	`}`
	`.feature-text p{font-size:13px;color:var(–lgray);line-height:1.6;}`

	`/* ── PROCESS ───────────────────────────────────────────────── */`
	`#process{padding:120px 48px;}`
	`.process-steps{`
	`display:grid;`
	`grid-template-columns:repeat(4,1fr);`
	`gap:0;margin-top:72px;`
	`position:relative;`
	`}`
	`.process-steps::before{`
	`content:’’;position:absolute;`
	`top:32px;left:10%;right:10%;height:1px;`
	`background:linear-gradient(90deg,transparent,var(–cyan),var(–cyan),transparent);`
	`opacity:.3;`
	`}`
	`.step{text-align:center;padding:0 24px;}`
	`.step-num{`
	`width:64px;height:64px;`
	`border:2px solid var(–cyan);`
	`border-radius:50%;`
	`display:flex;align-items:center;justify-content:center;`
	`font-family:var(–font-mono);font-size:18px;`
	`color:var(–cyan);`
	`margin:0 auto 24px;`
	`background:var(–bg);`
	`box-shadow:var(–glow);`
	`position:relative;z-index:1;`
	`}`
	`.step h4{`
	`font-family:var(–font-display);`
	`font-size:18px;font-weight:700;`
	`margin-bottom:10px;`
	`}`
	`.step p{font-size:13px;color:var(–lgray);line-height:1.6;}`

	`/* ── CERTIFICATIONS ────────────────────────────────────────── */`
	`#certs{`
	`padding:80px 48px;`
	`background:var(–bg3);`
	`border-top:1px solid var(–border);`
	`border-bottom:1px solid var(–border);`
	`}`
	`.cert-title{`
	`font-family:var(–font-mono);font-size:11px;`
	`color:var(–gray);letter-spacing:.15em;`
	`text-transform:uppercase;text-align:center;`
	`margin-bottom:40px;`
	`}`
	`.cert-badges{`
	`display:flex;flex-wrap:wrap;`
	`gap:16px;justify-content:center;`
	`}`
	`.cert-badge{`
	`display:flex;align-items:center;gap:10px;`
	`padding:12px 24px;`
	`border:1px solid var(–border);`
	`background:var(–bg);`
	`font-family:var(–font-mono);font-size:11px;`
	`color:var(–lgray);letter-spacing:.08em;`
	`transition:border-color .2s,color .2s;`
	`cursor:none;`
	`}`
	`.cert-badge:hover{border-color:var(–cyan);color:var(–cyan);}`
	`.cert-badge .dot{`
	`width:6px;height:6px;border-radius:50%;`
	`background:var(–cyan);flex-shrink:0;`
	`}`

	`/* ── CONTACT ───────────────────────────────────────────────── */`
	`#contact{`
	`padding:120px 48px;`
	`position:relative;overflow:hidden;`
	`}`
	`.contact-grid{`
	`display:grid;grid-template-columns:1fr 1fr;`
	`gap:80px;align-items:start;`
	`}`
	`.contact-info h2{`
	`font-family:var(–font-display);`
	`font-size:clamp(36px,5vw,60px);`
	`font-weight:900;line-height:1;`
	`margin-bottom:24px;`
	`}`
	`.contact-info h2 span{color:var(–cyan);}`
	`.contact-info p{`
	`font-size:15px;line-height:1.8;`
	`color:var(–lgray);margin-bottom:40px;`
	`}`
	`.contact-details{display:flex;flex-direction:column;gap:16px;}`
	`.contact-row{`
	`display:flex;align-items:center;gap:16px;`
	`font-family:var(–font-mono);font-size:13px;`
	`}`
	`.contact-row .icon{color:var(–cyan);font-size:16px;width:24px;}`
	`.contact-row a{color:var(–lgray);text-decoration:none;transition:color .2s;}`
	`.contact-row a:hover{color:var(–cyan);}`

	`/* form */`
	`.contact-form{display:flex;flex-direction:column;gap:16px;}`
	`.form-group{position:relative;}`
	`.form-group label{`
	`display:block;`
	`font-family:var(–font-mono);font-size:10px;`
	`color:var(–gray);letter-spacing:.12em;`
	`text-transform:uppercase;margin-bottom:8px;`
	`}`
	`.form-group input,`
	`.form-group textarea,`
	`.form-group select{`
	`width:100%;`
	`background:var(–bg2);`
	`border:1px solid var(–border);`
	`color:var(–white);`
	`font-family:var(–font-body);font-size:14px;`
	`padding:14px 16px;outline:none;`
	`transition:border-color .2s,box-shadow .2s;`
	`resize:vertical;`
	`appearance:none;`
	`}`
	`.form-group input:focus,`
	`.form-group textarea:focus,`
	`.form-group select:focus{`
	`border-color:var(–cyan);`
	`box-shadow:0 0 0 3px rgba(0,212,255,.1);`
	`}`
	`.form-group textarea{min-height:130px;}`
	`.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}`
	`.btn-submit{`
	`padding:16px 40px;`
	`background:var(–cyan);color:var(–bg);`
	`font-family:var(–font-mono);font-size:13px;`
	`letter-spacing:.1em;text-transform:uppercase;`
	`border:none;font-weight:700;`
	`cursor:none;width:100%;`
	`transition:box-shadow .2s,transform .15s;`
	`margin-top:8px;`
	`}`
	`.btn-submit:hover{`
	`box-shadow:0 0 40px rgba(0,212,255,.5);`
	`transform:translateY(-2px);`
	`}`

	`/* ── FOOTER ────────────────────────────────────────────────── */`
	`footer{`
	`background:var(–bg2);`
	`border-top:1px solid var(–border);`
	`padding:48px;`
	`}`
	`.footer-grid{`
	`display:grid;grid-template-columns:2fr 1fr 1fr;`
	`gap:64px;margin-bottom:48px;`
	`}`
	`.footer-brand .wordmark{`
	`font-family:var(–font-display);`
	`font-size:28px;font-weight:900;`
	`margin-bottom:12px;`
	`}`
	`.footer-brand .wordmark span{color:var(–cyan);}`
	`.footer-brand p{`
	`font-size:13px;color:var(–gray);line-height:1.7;`
	`max-width:280px;margin-bottom:20px;`
	`}`
	`.footer-social{display:flex;gap:12px;}`
	`.soc-btn{`
	`width:36px;height:36px;`
	`border:1px solid var(–border);`
	`display:flex;align-items:center;justify-content:center;`
	`color:var(–gray);font-size:14px;text-decoration:none;`
	`transition:border-color .2s,color .2s;cursor:none;`
	`}`
	`.soc-btn:hover{border-color:var(–cyan);color:var(–cyan);}`
	`.footer-col h5{`
	`font-family:var(–font-mono);font-size:10px;`
	`color:var(–cyan);letter-spacing:.15em;`
	`text-transform:uppercase;margin-bottom:20px;`
	`}`
	`.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}`
	`.footer-col ul a{`
	`font-size:13px;color:var(–gray);text-decoration:none;`
	`transition:color .2s;`
	`}`
	`.footer-col ul a:hover{color:var(–white);}`
	`.footer-bottom{`
	`display:flex;justify-content:space-between;align-items:center;`
	`padding-top:24px;border-top:1px solid var(–border);`
	`}`
	`.footer-copy{`
	`font-family:var(–font-mono);font-size:10px;`
	`color:var(–gray);letter-spacing:.08em;`
	`}`
	`.footer-iso{`
	`display:flex;align-items:center;gap:8px;`
	`font-family:var(–font-mono);font-size:10px;color:var(–gray);`
	`}`
	`.iso-dot{width:6px;height:6px;border-radius:50%;background:var(–mint);}`

	`/* ── ANIMATIONS ────────────────────────────────────────────── */`
	`@keyframes fadeUp{`
	`from{opacity:0;transform:translateY(30px);}`
	`to{opacity:1;transform:translateY(0);}`
	`}`
	`.fade-up{animation:fadeUp .7s ease forwards;opacity:0;}`
	`.delay-1{animation-delay:.15s;}`
	`.delay-2{animation-delay:.3s;}`
	`.delay-3{animation-delay:.45s;}`
	`.delay-4{animation-delay:.6s;}`

	`/* blinking cursor */`
	`@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}`
	`.blink{animation:blink 1s step-end infinite;color:var(–cyan);}`

	`/* ── RESPONSIVE ────────────────────────────────────────────── */`
	`@media(max-width:900px){`
	`nav{padding:0 24px;}`
	`.nav-links{display:none;}`
	`#hero{padding:100px 24px 60px;}`
	`.hero-stats{display:none;}`
	`.why-grid,.contact-grid,.process-steps,.footer-grid{`
	`grid-template-columns:1fr;gap:40px;`
	`}`
	`.why-visual{height:260px;}`
	`#services,#why,#process,#contact,#certs,footer{padding:80px 24px;}`
	`.form-grid{grid-template-columns:1fr;}`
	`}`
	`</style>`

	`</head>`
	`<body>`

	`<!-- Custom cursor -->`

	`<div class="cursor" id="cursor"></div>`
	`<div class="cursor-ring" id="cursorRing"></div>`

	`<!-- ── NAVIGATION ─────────────────────────────────────── -->`

	`<nav>`
	`<a href="#hero" class="nav-logo">`
	`<div class="badge">KT</div>`
	`<div class="wordmark">KIN<span>TECH</span></div>`
	`</a>`
	`<ul class="nav-links">`
	`<li><a href="#services">Services</a></li>`
	`<li><a href="#why">Why Us</a></li>`
	`<li><a href="#process">Process</a></li>`
	`<li><a href="#contact">Contact</a></li>`
	`</ul>`
	`<a href="#contact" class="nav-cta">Get Audit</a>`
	`</nav>`

	`<!-- ── HERO ───────────────────────────────────────────── -->`

	`<section id="hero">`
	`<div class="hero-orb orb-1"></div>`
	`<div class="hero-orb orb-2"></div>`

	`<div class="hero-content">`
	`<div class="hero-tag fade-up">Trusted Cybersecurity Partner</div>`
	`<h1 class="hero-h1 fade-up delay-1">`
	`DEFEND<br>`
	`<span class="line2">YOUR</span>`
	`<span class="line3">DIGITAL WORLD</span>`
	`</h1>`
	`<p class="hero-desc fade-up delay-2">`
	`KinTech Cybersecurity Solutions delivers expert penetration testing,`
	`vulnerability assessments, and ISO 27001-aligned security strategies —`
	`protecting businesses before attackers find the gaps.<span class="blink">_</span>`
	`</p>`
	`<div class="hero-btns fade-up delay-3">`
	`<a href="#contact" class="btn-primary">Get Free Consultation</a>`
	`<a href="#services" class="btn-outline">Explore Services</a>`
	`</div>`
	`</div>`

	`<div class="hero-stats fade-up delay-4">`
	`<div class="stat-item">`
	`<div class="stat-num">8+</div>`
	`<div class="stat-label">Years Experience</div>`
	`</div>`
	`<div class="stat-item">`
	`<div class="stat-num">100%</div>`
	`<div class="stat-label">HTTPS Coverage</div>`
	`</div>`
	`<div class="stat-item">`
	`<div class="stat-num">ISO</div>`
	`<div class="stat-label">27001 Certified</div>`
	`</div>`
	`</div>`
	`</section>`

	`<!-- ── TICKER ──────────────────────────────────────────── -->`

	`<div class="ticker">`
	`<div class="ticker-inner" id="tickerInner"></div>`
	`</div>`

	`<!-- ── SERVICES ───────────────────────────────────────── -->`

	`<section id="services">`
	`<div class="section-tag">What We Do</div>`
	`<h2 class="section-h2">Our Security<br>Services</h2>`
	`<div class="services-grid">`
	`<div class="service-card">`
	`<span class="service-num">01</span>`
	`<span class="service-icon">🛡️</span>`
	`<h3 class="service-title">Penetration Testing</h3>`
	`<p class="service-desc">Authorised simulated attacks on your systems to identify exploitable weaknesses before real attackers do. Web, network, and mobile app pentests.</p>`
	`<a href="#contact" class="service-link">Request Pentest →</a>`
	`</div>`
	`<div class="service-card">`
	`<span class="service-num">02</span>`
	`<span class="service-icon">🔍</span>`
	`<h3 class="service-title">Vulnerability Assessment</h3>`
	`<p class="service-desc">Comprehensive scanning and manual review of your infrastructure to catalog and prioritise security weaknesses with actionable remediation guidance.</p>`
	`<a href="#contact" class="service-link">Learn More →</a>`
	`</div>`
	`<div class="service-card">`
	`<span class="service-num">03</span>`
	`<span class="service-icon">📋</span>`
	`<h3 class="service-title">Security Audits</h3>`
	`<p class="service-desc">Thorough review of your security policies, access controls, and configurations against ISO/IEC 27001 and OWASP Top 10 standards.</p>`
	`<a href="#contact" class="service-link">Start Audit →</a>`
	`</div>`
	`<div class="service-card">`
	`<span class="service-num">04</span>`
	`<span class="service-icon">🚨</span>`
	`<h3 class="service-title">Incident Response</h3>`
	`<p class="service-desc">Rapid response, containment, and forensic analysis when a breach occurs — minimising damage and restoring operations with speed and precision.</p>`
	`<a href="#contact" class="service-link">Emergency Contact →</a>`
	`</div>`
	`<div class="service-card">`
	`<span class="service-num">05</span>`
	`<span class="service-icon">⚙️</span>`
	`<h3 class="service-title">Secure Development</h3>`
	`<p class="service-desc">Secure-by-design web and API development with OWASP Top 10 protections, JWT/RBAC authentication, and SSL/TLS configuration baked in from day one.</p>`
	`<a href="#contact" class="service-link">Build Secure →</a>`
	`</div>`
	`<div class="service-card">`
	`<span class="service-num">06</span>`
	`<span class="service-icon">🎓</span>`
	`<h3 class="service-title">Security Training</h3>`
	`<p class="service-desc">Hands-on cybersecurity awareness training for your team — from phishing simulation to secure coding practices and social engineering defence.</p>`
	`<a href="#contact" class="service-link">Train Your Team →</a>`
	`</div>`
	`</div>`
	`</section>`

	`<!-- ── WHY KINTECH ─────────────────────────────────────── -->`

	`<section id="why">`
	`<div class="why-grid">`
	`<div class="why-visual">`
	`<div class="why-ring"><div class="why-dot"></div></div>`
	`<div class="why-ring"></div>`
	`<svg class="shield-svg" viewBox="0 0 200 230" fill="none" xmlns="http://www.w3.org/2000/svg">`
	`<path d="M100 5 L195 40 L195 120 C195 170 155 210 100 225 C45 210 5 170 5 120 L5 40 Z"`
	`fill="#0d1428" stroke="#00d4ff" stroke-width="2"/>`
	`<path d="M100 30 L170 58 L170 118 C170 155 140 185 100 198 C60 185 30 155 30 118 L30 58 Z"`
	`fill="none" stroke="rgba(0,212,255,0.2)" stroke-width="1"/>`
	`<text x="100" y="128" text-anchor="middle" font-family="'Barlow Condensed',sans-serif"`
	`font-size="52" font-weight="900" fill="#00d4ff">KT</text>`
	`<circle cx="100" cy="198" r="4" fill="#00d4ff"/>`
	`</svg>`
	`</div>`
	`<div>`
	`<div class="section-tag">Why KinTech</div>`
	`<h2 class="section-h2" style="margin-bottom:40px;">Security-First<br>by Design</h2>`
	`<div class="feature-list">`
	`<div class="feature-item">`
	`<div class="feature-icon">🎯</div>`
	`<div class="feature-text">`
	`<h4>CEH v13 Certified Expertise</h4>`
	`<p>Certified Ethical Hacker with deep knowledge of adversary tactics — we think like attackers so you can defend like professionals.</p>`
	`</div>`
	`</div>`
	`<div class="feature-item">`
	`<div class="feature-icon">📜</div>`
	`<div class="feature-text">`
	`<h4>ISO/IEC 27001 Lead Implementer</h4>`
	`<p>Internationally recognised information security management — we align your defences to the gold standard framework.</p>`
	`</div>`
	`</div>`
	`<div class="feature-item">`
	`<div class="feature-icon">🌍</div>`
	`<div class="feature-text">`
	`<h4>Remote-Ready, Global Reach</h4>`
	`<p>Based in Cameroon, serving clients globally. Full remote delivery with tools and protocols for any time zone.</p>`
	`</div>`
	`</div>`
	`<div class="feature-item">`
	`<div class="feature-icon">⚡</div>`
	`<div class="feature-text">`
	`<h4>Developer + Security Dual Skill</h4>`
	`<p>We build AND secure — catching vulnerabilities at the code level, not after deployment, saving you time and cost.</p>`
	`</div>`
	`</div>`
	`</div>`
	`</div>`
	`</div>`
	`</section>`

	`<!-- ── PROCESS ─────────────────────────────────────────── -->`

	`<section id="process">`
	`<div class="section-tag">How It Works</div>`
	`<h2 class="section-h2">Our Proven<br>4-Step Process</h2>`
	`<div class="process-steps">`
	`<div class="step">`
	`<div class="step-num">01</div>`
	`<h4>Discovery</h4>`
	`<p>We understand your infrastructure, business context, and threat landscape through detailed scoping sessions.</p>`
	`</div>`
	`<div class="step">`
	`<div class="step-num">02</div>`
	`<h4>Assessment</h4>`
	`<p>Rigorous scanning, manual testing, and adversarial simulation tailored to your environment and risk profile.</p>`
	`</div>`
	`<div class="step">`
	`<div class="step-num">03</div>`
	`<h4>Report</h4>`
	`<p>Clear, prioritised findings with severity ratings, proof-of-concept evidence, and remediation roadmaps.</p>`
	`</div>`
	`<div class="step">`
	`<div class="step-num">04</div>`
	`<h4>Remediate</h4>`
	`<p>We support your team through fixes, verify patches, and retest to confirm vulnerabilities are fully closed.</p>`
	`</div>`
	`</div>`
	`</section>`

	`<!-- ── CERTIFICATIONS ──────────────────────────────────── -->`

	`<section id="certs">`
	`<p class="cert-title">Certifications & Standards</p>`
	`<div class="cert-badges">`
	`<div class="cert-badge"><span class="dot"></span>CEH v13 — EC-Council</div>`
	`<div class="cert-badge"><span class="dot"></span>ISO/IEC 27001 Lead Implementer</div>`
	`<div class="cert-badge"><span class="dot"></span>ISO 20000 IT Service Management</div>`
	`<div class="cert-badge"><span class="dot"></span>Microsoft Azure Security</div>`
	`<div class="cert-badge"><span class="dot"></span>Cisco Network Defense</div>`
	`<div class="cert-badge"><span class="dot"></span>OWASP Top 10 Compliant</div>`
	`</div>`
	`</section>`

	`<!-- ── CONTACT ─────────────────────────────────────────── -->`

	`<section id="contact">`
	`<div class="contact-grid">`
	`<div class="contact-info">`
	`<div class="section-tag">Get In Touch</div>`
	`<h2>Let's <span>Secure</span><br>Your Business</h2>`
	`<p>Whether you need a quick vulnerability scan or a full ISO 27001 implementation, we're ready to help. Get in touch for a free initial consultation.</p>`
	`<div class="contact-details">`
	`<div class="contact-row">`
	`<span class="icon">📧</span>`
	`<a href="mailto:[email protected]">[email protected]</a>`
	`</div>`
	`<div class="contact-row">`
	`<span class="icon">📞</span>`
	`<a href="tel:+237651923590">+237 651 923 590</a>`
	`</div>`
	`<div class="contact-row">`
	`<span class="icon">📍</span>`
	`<span style="color:var(--lgray)">Bamenda, Cameroon · Remote Globally</span>`
	`</div>`
	`<div class="contact-row">`
	`<span class="icon">💻</span>`
	`<a href="https://github.com/KingJourni17" target="_blank">github.com/KingJourni17</a>`
	`</div>`
	`</div>`
	`</div>`
	`<div>`
	`<form class="contact-form" onsubmit="return false;">`
	`<div class="form-grid">`
	`<div class="form-group">`
	`<label>Full Name</label>`
	`<input type="text" placeholder="John Doe"/>`
	`</div>`
	`<div class="form-group">`
	`<label>Company</label>`
	`<input type="text" placeholder="Acme Corp"/>`
	`</div>`
	`</div>`
	`<div class="form-group">`
	`<label>Email Address</label>`
	`<input type="email" placeholder="[email protected]"/>`
	`</div>`
	`<div class="form-group">`
	`<label>Service Required</label>`
	`<select>`
	`<option value="">Select a service…</option>`
	`<option>Penetration Testing</option>`
	`<option>Vulnerability Assessment</option>`
	`<option>Security Audit</option>`
	`<option>Incident Response</option>`
	`<option>Secure Development</option>`
	`<option>Security Training</option>`
	`<option>General Consultation</option>`
	`</select>`
	`</div>`
	`<div class="form-group">`
	`<label>Message</label>`
	`<textarea placeholder="Describe your security challenge or what you need help with…"></textarea>`
	`</div>`
	`<button type="submit" class="btn-submit">Send Secure Message →</button>`
	`</form>`
	`</div>`
	`</div>`
	`</section>`

	`<!-- ── FOOTER ──────────────────────────────────────────── -->`

	`<footer>`
	`<div class="footer-grid">`
	`<div class="footer-brand">`
	`<div class="wordmark">KIN<span>TECH</span></div>`
	`<p>Protecting businesses through ethical hacking, penetration testing, and ISO 27001-aligned security strategies. Based in Cameroon. Available worldwide.</p>`
	`<div class="footer-social">`
	`<a href="#" class="soc-btn" title="Facebook">f</a>`
	`<a href="https://github.com/KingJourni17" class="soc-btn" title="GitHub">gh</a>`
	`<a href="#" class="soc-btn" title="LinkedIn">in</a>`
	`</div>`
	`</div>`
	`<div class="footer-col">`
	`<h5>Services</h5>`
	`<ul>`
	`<li><a href="#services">Penetration Testing</a></li>`
	`<li><a href="#services">Vulnerability Assessment</a></li>`
	`<li><a href="#services">Security Audits</a></li>`
	`<li><a href="#services">Incident Response</a></li>`
	`<li><a href="#services">Secure Development</a></li>`
	`<li><a href="#services">Security Training</a></li>`
	`</ul>`
	`</div>`
	`<div class="footer-col">`
	`<h5>Company</h5>`
	`<ul>`
	`<li><a href="#why">About Us</a></li>`
	`<li><a href="#certs">Certifications</a></li>`
	`<li><a href="#process">Our Process</a></li>`
	`<li><a href="#contact">Contact</a></li>`
	`<li><a href="#">Privacy Policy</a></li>`
	`</ul>`
	`</div>`
	`</div>`
	`<div class="footer-bottom">`
	`<span class="footer-copy">© 2025 KinTech Cybersecurity Solutions. All rights reserved.</span>`
	`<div class="footer-iso">`
	`<span class="iso-dot"></span>`
	`ISO/IEC 27001 Certified Practice`
	`</div>`
	`</div>`
	`</footer>`

	`<script>`
	`// ── Cursor ─────────────────────────────────────────────`
	`const cur = document.getElementById('cursor');`
	`const ring = document.getElementById('cursorRing');`
	`let mx=0,my=0,rx=0,ry=0;`
	`document.addEventListener('mousemove',e=>{`
	`mx=e.clientX;my=e.clientY;`
	`cur.style.left=mx+'px';cur.style.top=my+'px';`
	`});`
	`(function animRing(){`
	`rx+=(mx-rx).12;ry+=(my-ry).12;`
	`ring.style.left=rx+'px';ring.style.top=ry+'px';`
	`requestAnimationFrame(animRing);`
	`})();`
	`document.querySelectorAll('a,button,.service-card,.cert-badge').forEach(el=>{`
	`el.addEventListener('mouseenter',()=>{`
	`cur.style.transform='translate(-50%,-50%) scale(2)';`
	`ring.style.width='60px';ring.style.height='60px';`
	`});`
	`el.addEventListener('mouseleave',()=>{`
	`cur.style.transform='translate(-50%,-50%) scale(1)';`
	`ring.style.width='36px';ring.style.height='36px';`
	`});`
	`});`

	`// ── Ticker ─────────────────────────────────────────────`
	`const items=[`
	`'Penetration Testing','ISO 27001 Certified','CEH v13','Vulnerability Assessment',`
	`'Incident Response','Secure by Design','OWASP Top 10','Network Security',`
	`'Web App Security','Zero Trust Architecture','Ethical Hacking','Cloud Security'`
	`];`
	`const ti=document.getElementById('tickerInner');`
	`[...items,...items].forEach(t=>{`
	`const d=document.createElement('div');`
	`d.className='ticker-item';`
	`const half=Math.floor(Math.random()*2);`
	d.innerHTML=half?`<span>${t}</span>`:t;
	`ti.appendChild(d);`
	`});`

	`// ── Smooth scroll nav ──────────────────────────────────`
	`document.querySelectorAll('a[href^="#"]').forEach(a=>{`
	`a.addEventListener('click',e=>{`
	`e.preventDefault();`
	`document.querySelector(a.getAttribute('href'))`
	`?.scrollIntoView({behavior:'smooth'});`
	`});`
	`});`

	`// ── Scroll fade-up ─────────────────────────────────────`
	`const obs=new IntersectionObserver(entries=>{`
	`entries.forEach(e=>{`
	`if(e.isIntersecting){`
	`e.target.style.animation='fadeUp .7s ease forwards';`
	`obs.unobserve(e.target);`
	`}`
	`});`
	`},{threshold:.15});`
	`document.querySelectorAll('.service-card,.step,.feature-item,.cert-badge')`
	`.forEach(el=>{ el.style.opacity='0'; obs.observe(el); });`
	`</script>`

	`</body>`
	`</html>`

<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>KinTech Cybersecurity Solutions</title>
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Barlow:wght@300;400;600;700;900&family=Barlow+Condensed:wght@700;900&display=swap" rel="stylesheet"/>
<style>
:root{
--bg: #080c1a;
--bg2: #0d1428;
--bg3: #111c35;
--cyan: #00d4ff;
--mint: #00ffa0;
--red: #ff3a3a;
--white: #f0f4ff;
--gray: #6b7fa3;
--lgray: #a0b0cc;
--border: rgba(0,212,255,0.18);
--glow: 0 0 24px rgba(0,212,255,0.35);
--font-display: 'Barlow Condensed', sans-serif;
--font-body: 'Barlow', sans-serif;
--font-mono: 'Share Tech Mono', monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
background:var(–bg);
color:var(–white);
font-family:var(–font-body);
overflow-x:hidden;
cursor:none;
}

/* ── CUSTOM CURSOR ─────────────────────────────────────────── */
.cursor{
position:fixed;width:12px;height:12px;
background:var(–cyan);border-radius:50%;
pointer-events:none;z-index:9999;
transform:translate(-50%,-50%);
transition:transform .1s,opacity .2s;
box-shadow:0 0 12px var(–cyan);
}
.cursor-ring{
position:fixed;width:36px;height:36px;
border:1.5px solid rgba(0,212,255,0.5);
border-radius:50%;pointer-events:none;z-index:9998;
transform:translate(-50%,-50%);
transition:transform .18s ease,width .2s,height .2s;
}

/* ── GRID OVERLAY ──────────────────────────────────────────── */
body::before{
content:’’;position:fixed;inset:0;
background-image:
linear-gradient(rgba(0,212,255,.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(0,212,255,.04) 1px, transparent 1px);
background-size:60px 60px;
pointer-events:none;z-index:0;
}

/* ── NAV ───────────────────────────────────────────────────── */
nav{
position:fixed;top:0;left:0;right:0;z-index:100;
display:flex;align-items:center;justify-content:space-between;
padding:0 48px;height:72px;
background:rgba(8,12,26,0.85);
backdrop-filter:blur(16px);
border-bottom:1px solid var(–border);
}
.nav-logo{
display:flex;align-items:center;gap:12px;
text-decoration:none;
}
.nav-logo .badge{
width:40px;height:40px;
border:2px solid var(–cyan);
border-radius:8px;
display:flex;align-items:center;justify-content:center;
font-family:var(–font-mono);
font-size:14px;color:var(–cyan);
box-shadow:var(–glow);
}
.nav-logo .wordmark{
font-family:var(–font-display);
font-size:22px;font-weight:900;
letter-spacing:.08em;color:var(–white);
}
.nav-logo .wordmark span{color:var(–cyan);}
.nav-links{display:flex;gap:32px;list-style:none;}
.nav-links a{
font-family:var(–font-mono);font-size:12px;
color:var(–gray);text-decoration:none;
letter-spacing:.1em;text-transform:uppercase;
transition:color .2s;
}
.nav-links a:hover{color:var(–cyan);}
.nav-cta{
padding:10px 24px;
border:1.5px solid var(–cyan);
background:transparent;
color:var(–cyan);font-family:var(–font-mono);
font-size:12px;letter-spacing:.1em;
text-transform:uppercase;text-decoration:none;
cursor:none;
transition:background .2s,box-shadow .2s,color .2s;
}
.nav-cta:hover{
background:var(–cyan);color:var(–bg);
box-shadow:var(–glow);
}

/* ── HERO ──────────────────────────────────────────────────── */
#hero{
min-height:100vh;
display:flex;align-items:center;
padding:120px 48px 80px;
position:relative;overflow:hidden;
}
.hero-orb{
position:absolute;
border-radius:50%;filter:blur(80px);pointer-events:none;
}
.orb-1{
width:600px;height:600px;
background:radial-gradient(circle, rgba(0,212,255,.12) 0%, transparent 70%);
top:-100px;right:-100px;
}
.orb-2{
width:400px;height:400px;
background:radial-gradient(circle, rgba(0,255,160,.08) 0%, transparent 70%);
bottom:0;left:200px;
}
.hero-content{
position:relative;z-index:1;
max-width:780px;
}
.hero-tag{
display:inline-flex;align-items:center;gap:10px;
font-family:var(–font-mono);font-size:11px;
color:var(–cyan);letter-spacing:.15em;
text-transform:uppercase;margin-bottom:28px;
}
.hero-tag::before{
content:’’;width:32px;height:1.5px;background:var(–cyan);
}
.hero-h1{
font-family:var(–font-display);
font-size:clamp(56px,8vw,110px);
font-weight:900;line-height:.92;
letter-spacing:-.01em;
margin-bottom:28px;
}
.hero-h1 .line2{color:var(–cyan);display:block;}
.hero-h1 .line3{
-webkit-text-stroke:1.5px rgba(0,212,255,0.5);
color:transparent;display:block;
}
.hero-desc{
font-size:16px;font-weight:300;line-height:1.8;
color:var(–lgray);max-width:540px;margin-bottom:48px;
}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;}
.btn-primary{
padding:16px 40px;
background:var(–cyan);color:var(–bg);
font-family:var(–font-mono);font-size:13px;
letter-spacing:.1em;text-transform:uppercase;
text-decoration:none;font-weight:700;
transition:box-shadow .2s,transform .15s;
cursor:none;
}
.btn-primary:hover{
box-shadow:0 0 40px rgba(0,212,255,.5);
transform:translateY(-2px);
}
.btn-outline{
padding:16px 40px;
border:1.5px solid var(–border);
color:var(–white);
font-family:var(–font-mono);font-size:13px;
letter-spacing:.1em;text-transform:uppercase;
text-decoration:none;
transition:border-color .2s,color .2s;
cursor:none;
}
.btn-outline:hover{border-color:var(–cyan);color:var(–cyan);}

.hero-stats{
position:absolute;right:48px;top:50%;
transform:translateY(-50%);
display:flex;flex-direction:column;gap:40px;
z-index:1;
}
.stat-item{text-align:right;}
.stat-num{
font-family:var(–font-display);
font-size:48px;font-weight:900;
color:var(–cyan);line-height:1;
}
.stat-label{
font-family:var(–font-mono);
font-size:10px;color:var(–gray);
letter-spacing:.12em;text-transform:uppercase;
margin-top:4px;
}

/* scrolling ticker */
.ticker{
background:var(–bg3);
border-top:1px solid var(–border);
border-bottom:1px solid var(–border);
overflow:hidden;padding:14px 0;
position:relative;z-index:1;
}
.ticker-inner{
display:flex;gap:0;
animation:ticker 20s linear infinite;
white-space:nowrap;
}
.ticker-item{
font-family:var(–font-mono);font-size:11px;
color:var(–gray);letter-spacing:.12em;
text-transform:uppercase;
padding:0 40px;
border-right:1px solid var(–border);
}
.ticker-item span{color:var(–cyan);}
@keyframes ticker{
0%{transform:translateX(0);}
100%{transform:translateX(-50%);}
}

/* ── SERVICES ──────────────────────────────────────────────── */
#services{
padding:120px 48px;
position:relative;
}
.section-tag{
font-family:var(–font-mono);font-size:11px;
color:var(–cyan);letter-spacing:.15em;
text-transform:uppercase;margin-bottom:16px;
display:flex;align-items:center;gap:12px;
}
.section-tag::after{
content:’’;flex:1;max-width:60px;
height:1px;background:var(–cyan);opacity:.5;
}
.section-h2{
font-family:var(–font-display);
font-size:clamp(36px,5vw,64px);
font-weight:900;margin-bottom:72px;
line-height:1;
}
.services-grid{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:2px;
}
.service-card{
background:var(–bg2);
padding:40px 32px;
border:1px solid var(–border);
position:relative;overflow:hidden;
transition:border-color .3s,background .3s;
cursor:none;
}
.service-card::before{
content:’’;position:absolute;
top:0;left:0;right:0;height:2px;
background:var(–cyan);
transform:scaleX(0);transform-origin:left;
transition:transform .3s;
}
.service-card:hover{
background:var(–bg3);
border-color:rgba(0,212,255,.4);
}
.service-card:hover::before{transform:scaleX(1);}
.service-icon{
font-size:32px;margin-bottom:24px;
display:block;
}
.service-num{
position:absolute;top:24px;right:24px;
font-family:var(–font-mono);font-size:11px;
color:rgba(0,212,255,.25);letter-spacing:.1em;
}
.service-title{
font-family:var(–font-display);
font-size:24px;font-weight:700;
margin-bottom:12px;
}
.service-desc{
font-size:14px;line-height:1.7;
color:var(–lgray);
}
.service-link{
display:inline-flex;align-items:center;gap:8px;
margin-top:24px;
font-family:var(–font-mono);font-size:11px;
color:var(–cyan);text-decoration:none;
letter-spacing:.1em;text-transform:uppercase;
transition:gap .2s;cursor:none;
}
.service-link:hover{gap:14px;}

/* ── WHY KINTECH ───────────────────────────────────────────── */
#why{
padding:120px 48px;
background:var(–bg2);
position:relative;
overflow:hidden;
}
#why::before{
content:’’;position:absolute;
right:-200px;top:50%;transform:translateY(-50%);
width:700px;height:700px;
border:1px solid var(–border);border-radius:50%;
}
#why::after{
content:’’;position:absolute;
right:-100px;top:50%;transform:translateY(-50%);
width:500px;height:500px;
border:1px solid rgba(0,212,255,.08);border-radius:50%;
}
.why-grid{
display:grid;grid-template-columns:1fr 1fr;
gap:80px;align-items:center;
position:relative;z-index:1;
}
.why-visual{
position:relative;
display:flex;align-items:center;justify-content:center;
height:420px;
}
.shield-svg{
width:240px;height:auto;
filter:drop-shadow(0 0 30px rgba(0,212,255,.4));
}
.why-ring{
position:absolute;
border:1px dashed rgba(0,212,255,.2);
border-radius:50%;animation:spin 20s linear infinite;
}
.why-ring:nth-child(1){width:320px;height:320px;}
.why-ring:nth-child(2){width:420px;height:420px;animation-direction:reverse;animation-duration:30s;}
@keyframes spin{to{transform:rotate(360deg);}}
.why-dot{
position:absolute;width:8px;height:8px;
background:var(–cyan);border-radius:50%;
box-shadow:0 0 12px var(–cyan);
top:0;left:50%;transform:translateX(-50%);
}
.feature-list{display:flex;flex-direction:column;gap:28px;}
.feature-item{
display:flex;gap:20px;align-items:flex-start;
padding-bottom:28px;border-bottom:1px solid var(–border);
}
.feature-item:last-child{border-bottom:none;padding-bottom:0;}
.feature-icon{
width:48px;height:48px;flex-shrink:0;
border:1px solid var(–border);
display:flex;align-items:center;justify-content:center;
font-size:20px;color:var(–cyan);
background:var(–bg);
}
.feature-text h4{
font-family:var(–font-display);
font-size:18px;font-weight:700;margin-bottom:4px;
}
.feature-text p{font-size:13px;color:var(–lgray);line-height:1.6;}

/* ── PROCESS ───────────────────────────────────────────────── */
#process{padding:120px 48px;}
.process-steps{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:0;margin-top:72px;
position:relative;
}
.process-steps::before{
content:’’;position:absolute;
top:32px;left:10%;right:10%;height:1px;
background:linear-gradient(90deg,transparent,var(–cyan),var(–cyan),transparent);
opacity:.3;
}
.step{text-align:center;padding:0 24px;}
.step-num{
width:64px;height:64px;
border:2px solid var(–cyan);
border-radius:50%;
display:flex;align-items:center;justify-content:center;
font-family:var(–font-mono);font-size:18px;
color:var(–cyan);
margin:0 auto 24px;
background:var(–bg);
box-shadow:var(–glow);
position:relative;z-index:1;
}
.step h4{
font-family:var(–font-display);
font-size:18px;font-weight:700;
margin-bottom:10px;
}
.step p{font-size:13px;color:var(–lgray);line-height:1.6;}

/* ── CERTIFICATIONS ────────────────────────────────────────── */
#certs{
padding:80px 48px;
background:var(–bg3);
border-top:1px solid var(–border);
border-bottom:1px solid var(–border);
}
.cert-title{
font-family:var(–font-mono);font-size:11px;
color:var(–gray);letter-spacing:.15em;
text-transform:uppercase;text-align:center;
margin-bottom:40px;
}
.cert-badges{
display:flex;flex-wrap:wrap;
gap:16px;justify-content:center;
}
.cert-badge{
display:flex;align-items:center;gap:10px;
padding:12px 24px;
border:1px solid var(–border);
background:var(–bg);
font-family:var(–font-mono);font-size:11px;
color:var(–lgray);letter-spacing:.08em;
transition:border-color .2s,color .2s;
cursor:none;
}
.cert-badge:hover{border-color:var(–cyan);color:var(–cyan);}
.cert-badge .dot{
width:6px;height:6px;border-radius:50%;
background:var(–cyan);flex-shrink:0;
}

/* ── CONTACT ───────────────────────────────────────────────── */
#contact{
padding:120px 48px;
position:relative;overflow:hidden;
}
.contact-grid{
display:grid;grid-template-columns:1fr 1fr;
gap:80px;align-items:start;
}
.contact-info h2{
font-family:var(–font-display);
font-size:clamp(36px,5vw,60px);
font-weight:900;line-height:1;
margin-bottom:24px;
}
.contact-info h2 span{color:var(–cyan);}
.contact-info p{
font-size:15px;line-height:1.8;
color:var(–lgray);margin-bottom:40px;
}
.contact-details{display:flex;flex-direction:column;gap:16px;}
.contact-row{
display:flex;align-items:center;gap:16px;
font-family:var(–font-mono);font-size:13px;
}
.contact-row .icon{color:var(–cyan);font-size:16px;width:24px;}
.contact-row a{color:var(–lgray);text-decoration:none;transition:color .2s;}
.contact-row a:hover{color:var(–cyan);}

/* form */
.contact-form{display:flex;flex-direction:column;gap:16px;}
.form-group{position:relative;}
.form-group label{
display:block;
font-family:var(–font-mono);font-size:10px;
color:var(–gray);letter-spacing:.12em;
text-transform:uppercase;margin-bottom:8px;
}
.form-group input,
.form-group textarea,
.form-group select{
width:100%;
background:var(–bg2);
border:1px solid var(–border);
color:var(–white);
font-family:var(–font-body);font-size:14px;
padding:14px 16px;outline:none;
transition:border-color .2s,box-shadow .2s;
resize:vertical;
appearance:none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus{
border-color:var(–cyan);
box-shadow:0 0 0 3px rgba(0,212,255,.1);
}
.form-group textarea{min-height:130px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.btn-submit{
padding:16px 40px;
background:var(–cyan);color:var(–bg);
font-family:var(–font-mono);font-size:13px;
letter-spacing:.1em;text-transform:uppercase;
border:none;font-weight:700;
cursor:none;width:100%;
transition:box-shadow .2s,transform .15s;
margin-top:8px;
}
.btn-submit:hover{
box-shadow:0 0 40px rgba(0,212,255,.5);
transform:translateY(-2px);
}

/* ── FOOTER ────────────────────────────────────────────────── */
footer{
background:var(–bg2);
border-top:1px solid var(–border);
padding:48px;
}
.footer-grid{
display:grid;grid-template-columns:2fr 1fr 1fr;
gap:64px;margin-bottom:48px;
}
.footer-brand .wordmark{
font-family:var(–font-display);
font-size:28px;font-weight:900;
margin-bottom:12px;
}
.footer-brand .wordmark span{color:var(–cyan);}
.footer-brand p{
font-size:13px;color:var(–gray);line-height:1.7;
max-width:280px;margin-bottom:20px;
}
.footer-social{display:flex;gap:12px;}
.soc-btn{
width:36px;height:36px;
border:1px solid var(–border);
display:flex;align-items:center;justify-content:center;
color:var(–gray);font-size:14px;text-decoration:none;
transition:border-color .2s,color .2s;cursor:none;
}
.soc-btn:hover{border-color:var(–cyan);color:var(–cyan);}
.footer-col h5{
font-family:var(–font-mono);font-size:10px;
color:var(–cyan);letter-spacing:.15em;
text-transform:uppercase;margin-bottom:20px;
}
.footer-col ul{list-style:none;display:flex;flex-direction:column;gap:10px;}
.footer-col ul a{
font-size:13px;color:var(–gray);text-decoration:none;
transition:color .2s;
}
.footer-col ul a:hover{color:var(–white);}
.footer-bottom{
display:flex;justify-content:space-between;align-items:center;
padding-top:24px;border-top:1px solid var(–border);
}
.footer-copy{
font-family:var(–font-mono);font-size:10px;
color:var(–gray);letter-spacing:.08em;
}
.footer-iso{
display:flex;align-items:center;gap:8px;
font-family:var(–font-mono);font-size:10px;color:var(–gray);
}
.iso-dot{width:6px;height:6px;border-radius:50%;background:var(–mint);}

/* ── ANIMATIONS ────────────────────────────────────────────── */
@keyframes fadeUp{
from{opacity:0;transform:translateY(30px);}
to{opacity:1;transform:translateY(0);}
}
.fade-up{animation:fadeUp .7s ease forwards;opacity:0;}
.delay-1{animation-delay:.15s;}
.delay-2{animation-delay:.3s;}
.delay-3{animation-delay:.45s;}
.delay-4{animation-delay:.6s;}

/* blinking cursor */
@keyframes blink{0%,100%{opacity:1;}50%{opacity:0;}}
.blink{animation:blink 1s step-end infinite;color:var(–cyan);}

/* ── RESPONSIVE ────────────────────────────────────────────── */
@media(max-width:900px){
nav{padding:0 24px;}
.nav-links{display:none;}
#hero{padding:100px 24px 60px;}
.hero-stats{display:none;}
.why-grid,.contact-grid,.process-steps,.footer-grid{
grid-template-columns:1fr;gap:40px;
}
.why-visual{height:260px;}
#services,#why,#process,#contact,#certs,footer{padding:80px 24px;}
.form-grid{grid-template-columns:1fr;}
}
</style>

</head>
<body>

<!-- Custom cursor -->

<div class="cursor" id="cursor"></div>
<div class="cursor-ring" id="cursorRing"></div>

<!-- ── NAVIGATION ─────────────────────────────────────── -->

<nav>
<a href="#hero" class="nav-logo">
<div class="badge">KT</div>
<div class="wordmark">KIN<span>TECH</span></div>
</a>
<ul class="nav-links">
<li><a href="#services">Services</a></li>
<li><a href="#why">Why Us</a></li>
<li><a href="#process">Process</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
<a href="#contact" class="nav-cta">Get Audit</a>
</nav>

<!-- ── HERO ───────────────────────────────────────────── -->

<section id="hero">
<div class="hero-orb orb-1"></div>
<div class="hero-orb orb-2"></div>

<div class="hero-content">
<div class="hero-tag fade-up">Trusted Cybersecurity Partner</div>
<h1 class="hero-h1 fade-up delay-1">
DEFEND<br>
<span class="line2">YOUR</span>
<span class="line3">DIGITAL WORLD</span>
</h1>
<p class="hero-desc fade-up delay-2">
KinTech Cybersecurity Solutions delivers expert penetration testing,
vulnerability assessments, and ISO 27001-aligned security strategies —
protecting businesses before attackers find the gaps.<span class="blink">_</span>
</p>
<div class="hero-btns fade-up delay-3">
<a href="#contact" class="btn-primary">Get Free Consultation</a>
<a href="#services" class="btn-outline">Explore Services</a>
</div>
</div>

<div class="hero-stats fade-up delay-4">
<div class="stat-item">
<div class="stat-num">8+</div>
<div class="stat-label">Years Experience</div>
</div>
<div class="stat-item">
<div class="stat-num">100%</div>
<div class="stat-label">HTTPS Coverage</div>
</div>
<div class="stat-item">
<div class="stat-num">ISO</div>
<div class="stat-label">27001 Certified</div>
</div>
</div>
</section>

<!-- ── TICKER ──────────────────────────────────────────── -->

<div class="ticker">
<div class="ticker-inner" id="tickerInner"></div>
</div>

<!-- ── SERVICES ───────────────────────────────────────── -->

<section id="services">
<div class="section-tag">What We Do</div>
<h2 class="section-h2">Our Security<br>Services</h2>
<div class="services-grid">
<div class="service-card">
<span class="service-num">01</span>
<span class="service-icon">🛡️</span>
<h3 class="service-title">Penetration Testing</h3>
<p class="service-desc">Authorised simulated attacks on your systems to identify exploitable weaknesses before real attackers do. Web, network, and mobile app pentests.</p>
<a href="#contact" class="service-link">Request Pentest →</a>
</div>
<div class="service-card">
<span class="service-num">02</span>
<span class="service-icon">🔍</span>
<h3 class="service-title">Vulnerability Assessment</h3>
<p class="service-desc">Comprehensive scanning and manual review of your infrastructure to catalog and prioritise security weaknesses with actionable remediation guidance.</p>
<a href="#contact" class="service-link">Learn More →</a>
</div>
<div class="service-card">
<span class="service-num">03</span>
<span class="service-icon">📋</span>
<h3 class="service-title">Security Audits</h3>
<p class="service-desc">Thorough review of your security policies, access controls, and configurations against ISO/IEC 27001 and OWASP Top 10 standards.</p>
<a href="#contact" class="service-link">Start Audit →</a>
</div>
<div class="service-card">
<span class="service-num">04</span>
<span class="service-icon">🚨</span>
<h3 class="service-title">Incident Response</h3>
<p class="service-desc">Rapid response, containment, and forensic analysis when a breach occurs — minimising damage and restoring operations with speed and precision.</p>
<a href="#contact" class="service-link">Emergency Contact →</a>
</div>
<div class="service-card">
<span class="service-num">05</span>
<span class="service-icon">⚙️</span>
<h3 class="service-title">Secure Development</h3>
<p class="service-desc">Secure-by-design web and API development with OWASP Top 10 protections, JWT/RBAC authentication, and SSL/TLS configuration baked in from day one.</p>
<a href="#contact" class="service-link">Build Secure →</a>
</div>
<div class="service-card">
<span class="service-num">06</span>
<span class="service-icon">🎓</span>
<h3 class="service-title">Security Training</h3>
<p class="service-desc">Hands-on cybersecurity awareness training for your team — from phishing simulation to secure coding practices and social engineering defence.</p>
<a href="#contact" class="service-link">Train Your Team →</a>
</div>
</div>
</section>

<!-- ── WHY KINTECH ─────────────────────────────────────── -->

<section id="why">
<div class="why-grid">
<div class="why-visual">
<div class="why-ring"><div class="why-dot"></div></div>
<div class="why-ring"></div>
<svg class="shield-svg" viewBox="0 0 200 230" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M100 5 L195 40 L195 120 C195 170 155 210 100 225 C45 210 5 170 5 120 L5 40 Z"
fill="#0d1428" stroke="#00d4ff" stroke-width="2"/>
<path d="M100 30 L170 58 L170 118 C170 155 140 185 100 198 C60 185 30 155 30 118 L30 58 Z"
fill="none" stroke="rgba(0,212,255,0.2)" stroke-width="1"/>
<text x="100" y="128" text-anchor="middle" font-family="'Barlow Condensed',sans-serif"
font-size="52" font-weight="900" fill="#00d4ff">KT</text>
<circle cx="100" cy="198" r="4" fill="#00d4ff"/>
</svg>
</div>
<div>
<div class="section-tag">Why KinTech</div>
<h2 class="section-h2" style="margin-bottom:40px;">Security-First<br>by Design</h2>
<div class="feature-list">
<div class="feature-item">
<div class="feature-icon">🎯</div>
<div class="feature-text">
<h4>CEH v13 Certified Expertise</h4>
<p>Certified Ethical Hacker with deep knowledge of adversary tactics — we think like attackers so you can defend like professionals.</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">📜</div>
<div class="feature-text">
<h4>ISO/IEC 27001 Lead Implementer</h4>
<p>Internationally recognised information security management — we align your defences to the gold standard framework.</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">🌍</div>
<div class="feature-text">
<h4>Remote-Ready, Global Reach</h4>
<p>Based in Cameroon, serving clients globally. Full remote delivery with tools and protocols for any time zone.</p>
</div>
</div>
<div class="feature-item">
<div class="feature-icon">⚡</div>
<div class="feature-text">
<h4>Developer + Security Dual Skill</h4>
<p>We build AND secure — catching vulnerabilities at the code level, not after deployment, saving you time and cost.</p>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- ── PROCESS ─────────────────────────────────────────── -->

<section id="process">
<div class="section-tag">How It Works</div>
<h2 class="section-h2">Our Proven<br>4-Step Process</h2>
<div class="process-steps">
<div class="step">
<div class="step-num">01</div>
<h4>Discovery</h4>
<p>We understand your infrastructure, business context, and threat landscape through detailed scoping sessions.</p>
</div>
<div class="step">
<div class="step-num">02</div>
<h4>Assessment</h4>
<p>Rigorous scanning, manual testing, and adversarial simulation tailored to your environment and risk profile.</p>
</div>
<div class="step">
<div class="step-num">03</div>
<h4>Report</h4>
<p>Clear, prioritised findings with severity ratings, proof-of-concept evidence, and remediation roadmaps.</p>
</div>
<div class="step">
<div class="step-num">04</div>
<h4>Remediate</h4>
<p>We support your team through fixes, verify patches, and retest to confirm vulnerabilities are fully closed.</p>
</div>
</div>
</section>

<!-- ── CERTIFICATIONS ──────────────────────────────────── -->

<section id="certs">
<p class="cert-title">Certifications & Standards</p>
<div class="cert-badges">
<div class="cert-badge"><span class="dot"></span>CEH v13 — EC-Council</div>
<div class="cert-badge"><span class="dot"></span>ISO/IEC 27001 Lead Implementer</div>
<div class="cert-badge"><span class="dot"></span>ISO 20000 IT Service Management</div>
<div class="cert-badge"><span class="dot"></span>Microsoft Azure Security</div>
<div class="cert-badge"><span class="dot"></span>Cisco Network Defense</div>
<div class="cert-badge"><span class="dot"></span>OWASP Top 10 Compliant</div>
</div>
</section>

<!-- ── CONTACT ─────────────────────────────────────────── -->

<section id="contact">
<div class="contact-grid">
<div class="contact-info">
<div class="section-tag">Get In Touch</div>
<h2>Let's <span>Secure</span><br>Your Business</h2>
<p>Whether you need a quick vulnerability scan or a full ISO 27001 implementation, we're ready to help. Get in touch for a free initial consultation.</p>
<div class="contact-details">
<div class="contact-row">
<span class="icon">📧</span>
<a href="mailto:fonkinjinwijinklins@gmail.com">fonkinjinwijinklins@gmail.com</a>
</div>
<div class="contact-row">
<span class="icon">📞</span>
<a href="tel:+237651923590">+237 651 923 590</a>
</div>
<div class="contact-row">
<span class="icon">📍</span>
<span style="color:var(--lgray)">Bamenda, Cameroon · Remote Globally</span>
</div>
<div class="contact-row">
<span class="icon">💻</span>
<a href="https://github.com/KingJourni17" target="_blank">github.com/KingJourni17</a>
</div>
</div>
</div>
<div>
<form class="contact-form" onsubmit="return false;">
<div class="form-grid">
<div class="form-group">
<label>Full Name</label>
<input type="text" placeholder="John Doe"/>
</div>
<div class="form-group">
<label>Company</label>
<input type="text" placeholder="Acme Corp"/>
</div>
</div>
<div class="form-group">
<label>Email Address</label>
<input type="email" placeholder="john@company.com"/>
</div>
<div class="form-group">
<label>Service Required</label>
<select>
<option value="">Select a service…</option>
<option>Penetration Testing</option>
<option>Vulnerability Assessment</option>
<option>Security Audit</option>
<option>Incident Response</option>
<option>Secure Development</option>
<option>Security Training</option>
<option>General Consultation</option>
</select>
</div>
<div class="form-group">
<label>Message</label>
<textarea placeholder="Describe your security challenge or what you need help with…">

Embed Snippet on Your Site

KinTech template

Comments

Add a Comment Cancel Reply