@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --bg:#f4f7fb;--surface:#fff;--ink:#0b1220;--muted:#64748b;--line:#dce4ee;
  --dark:#08111f;--dark2:#0e1a2c;--accent:#28d7c5;--accent2:#7c8cff;
  --shadow:0 24px 70px rgba(8,17,31,.10);--radius:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Manrope,Arial,sans-serif;line-height:1.7}
a{color:inherit}
.container{width:min(1120px,calc(100% - 40px));margin:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(8,17,31,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-weight:800}
.brand-mark{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#07101e;font-size:13px}
.nav-links{display:flex;align-items:center;gap:25px;color:#cbd5e1;font-size:14px;font-weight:600}
.nav-links a{text-decoration:none}.nav-links a:hover{color:#fff}
.nav-cta{padding:9px 15px;border:1px solid rgba(255,255,255,.2);border-radius:10px;color:#fff!important}
.menu-toggle{display:none;background:none;border:0;color:#fff;font-size:25px}
.hero{background:radial-gradient(circle at 85% 20%,rgba(40,215,197,.14),transparent 30%),radial-gradient(circle at 20% 0%,rgba(124,140,255,.15),transparent 28%),var(--dark);color:#fff;padding:105px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:80px;align-items:center}
.eyebrow,.section-kicker{font:500 12px/1.3 'DM Mono',monospace;letter-spacing:.14em;color:#7d8ca4}
.hero .eyebrow{color:#93a4bc}.pulse{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:9px;box-shadow:0 0 0 6px rgba(40,215,197,.08)}
.hero h1{font-size:clamp(42px,6vw,76px);line-height:1.05;letter-spacing:-.055em;margin:22px 0}
.hero h1 span{color:var(--accent)}
.hero-text{max-width:730px;color:#b7c3d4;font-size:18px}
.hero-actions{display:flex;gap:13px;margin:32px 0}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:13px 19px;border-radius:12px;text-decoration:none;font-weight:800;font-size:14px}
.btn-primary{background:var(--accent);color:#07101e}.btn-secondary{border:1px solid #334155;color:#fff}
.hero-stats{display:flex;gap:35px;margin-top:45px}.hero-stats div{display:flex;flex-direction:column}.hero-stats strong{font-size:25px}.hero-stats span{font-size:12px;color:#8797ae}
.hero-card{padding:34px;border:1px solid rgba(255,255,255,.12);border-radius:26px;background:rgba(255,255,255,.045);box-shadow:var(--shadow)}
.avatar{width:88px;height:88px;border-radius:25px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#07101e;font-size:26px;font-weight:800;margin-bottom:22px}
.hero-card h2{margin:0;font-size:28px}.hero-card>p{margin:3px 0 18px;color:#9fb0c5}
.tag-row{display:flex;gap:8px;flex-wrap:wrap}.tag-row span,.timeline-tags span{font:500 11px 'DM Mono',monospace;padding:6px 9px;border:1px solid var(--line);border-radius:999px;color:#526173;background:#fff}
.hero-card .tag-row span{background:transparent;border-color:#334155;color:#cbd5e1}
.mini-contact{border-top:1px solid rgba(255,255,255,.1);margin-top:25px;padding-top:20px;display:grid;gap:10px;font-size:12px;color:#9fb0c5}.mini-contact a{color:#dbe7f5}
.section{padding:100px 0}.section h2{font-size:clamp(32px,4vw,50px);line-height:1.1;letter-spacing:-.04em;margin:12px 0 25px}.two-col{display:grid;grid-template-columns:.85fr 1.15fr;gap:90px}.section-copy{color:var(--muted);font-size:16px;max-width:680px}
.section-dark{background:var(--dark);color:#fff}.section-dark .section-kicker{color:#7f91aa}.section-dark h2{margin-bottom:42px}
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.skill-card{padding:28px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.035)}.skill-card span,.project-number{font:500 12px 'DM Mono',monospace;color:var(--accent)}.skill-card h3{margin:18px 0 8px}.skill-card p{margin:0;color:#9cacbf;font-size:13px}
.timeline{margin-top:45px;border-left:1px solid var(--line);margin-left:9px}.timeline-item{position:relative;padding:0 0 48px 38px}.timeline-dot{position:absolute;left:-6px;top:4px;width:11px;height:11px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 7px var(--bg)}.timeline-date{font:500 11px 'DM Mono',monospace;color:#7a899e}.timeline-item h3{font-size:22px;margin:9px 0}.timeline-item p{color:var(--muted);max-width:720px}.timeline-tags{display:flex;gap:7px;flex-wrap:wrap}.timeline-tags span{background:transparent}
.highlight-section{background:#e9eef6}.achievement-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#d3dce8;border:1px solid #d3dce8}.achievement-grid div{background:#f4f7fb;padding:30px}.achievement-grid strong{display:block;font-size:30px}.achievement-grid span{font-size:13px;color:var(--muted)}
.project-preview{display:flex;align-items:center;justify-content:space-between;gap:40px}.contact-section{padding-top:40px}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}.contact-card{border:1px solid var(--line);border-radius:20px;background:#fff;box-shadow:var(--shadow)}.contact-card a{display:block;padding:23px 25px;text-decoration:none;border-bottom:1px solid var(--line)}.contact-card a:last-child{border-bottom:0}.contact-card span{display:block;font:500 11px 'DM Mono',monospace;color:#8a99aa;text-transform:uppercase}.contact-card strong{font-size:15px}
.footer{background:var(--dark);color:#9aabc0;padding:42px 0 25px}.footer-inner{display:flex;justify-content:space-between;gap:30px}.footer strong{color:#fff}.footer p{margin:4px 0}.footer-links{display:flex;gap:20px}.footer-links a{color:#dbe4ef;text-decoration:none}.copyright{font-size:11px;border-top:1px solid #1c2a3e;margin-top:28px;padding-top:18px}
.page-hero{background:var(--dark);color:#fff;padding:75px 0}.page-hero h1{font-size:clamp(42px,6vw,68px);margin:15px 0 5px;letter-spacing:-.05em}.page-hero p:not(.section-kicker){color:#aebdd0;margin-bottom:28px}
.resume-layout{display:grid;grid-template-columns:280px 1fr;gap:60px}.resume-box{padding:20px;border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:16px}.resume-box h3{margin-top:0}.resume-box p{font-size:13px;color:var(--muted)}.resume-kicker{margin-top:55px}.resume-role{border-left:2px solid var(--line);padding-left:22px;margin:0 0 38px}.resume-role h3{margin:0 0 4px}.resume-role>span{font:500 11px 'DM Mono',monospace;color:#7b8ba0}.resume-role li{margin:7px 0;color:var(--muted);font-size:14px}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.project-card{padding:32px;border:1px solid var(--line);border-radius:20px;background:#fff;min-height:260px;box-shadow:0 12px 35px rgba(8,17,31,.05)}.project-card h2{font-size:27px;margin:18px 0 10px}.project-card p{color:var(--muted);font-size:14px}.project-card.featured{background:var(--dark);color:#fff}.project-card.featured p{color:#aab8c9}.project-card.featured .tag-row span{background:transparent;border-color:#334155;color:#cbd5e1}

@media(max-width:850px){
  .nav-links{display:none;position:absolute;top:76px;left:0;right:0;background:var(--dark);padding:20px;flex-direction:column;align-items:flex-start}.nav-links.open{display:flex}.menu-toggle{display:block}
  .hero-grid,.two-col,.contact-grid,.resume-layout{grid-template-columns:1fr;gap:45px}.hero{padding-top:70px}.hero-card{max-width:520px}.skills-grid{grid-template-columns:1fr 1fr}.project-grid{grid-template-columns:1fr}.project-preview,.footer-inner{align-items:flex-start;flex-direction:column}
}
.creator-section{
  background:#eef3f8;
}

.creator-section .section-copy{
  max-width:700px;
}

.creator-section .hero-actions{
  margin-top:28px;
  margin-bottom:0;
}

.creator-section .btn-secondary{
  color:var(--ink);
  border-color:var(--line);
  background:#fff;
}

.creator-section .btn-secondary:hover{
  border-color:var(--accent2); 
}

.creator-links{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:55px;
}

.creator-link{
  display:flex;
  flex-direction:column;
  padding:28px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  text-decoration:none;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}

.creator-link:hover{
  transform:translateY(-4px);
  border-color:var(--accent2);
  box-shadow:0 16px 40px rgba(8,17,31,.08);
}

.creator-link-label{
  font:500 11px 'DM Mono',monospace;
  letter-spacing:.14em;
  color:var(--accent2);
}

.creator-link strong{
  margin-top:14px;
  font-size:17px;
}

.creator-link small{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.6;
}

.creator-topics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin-top:20px;
}

.creator-topic{
  padding:24px;
  border-top:2px solid var(--accent);
}

.creator-topic span{
  font:500 11px 'DM Mono',monospace;
  color:var(--accent2);
}

.creator-topic h3{
  margin:12px 0 8px;
  font-size:18px;
}

.creator-topic p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.7;
}

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

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

@media(max-width:520px){
  .container{width:min(100% - 28px,1120px)}.section{padding:72px 0}.hero h1{font-size:43px}.hero-stats{gap:18px}.hero-stats strong{font-size:21px}.hero-stats span{font-size:10px}.skills-grid{grid-template-columns:1fr}.achievement-grid{grid-template-columns:1fr}.hero-actions{flex-direction:column;align-items:stretch}
}

.photo-avatar{overflow:hidden;padding:0;background:#172033}
.photo-avatar img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block}

.tool-card {
    max-width: 900px;
    margin: auto;
    padding: 40px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 22px;
    box-shadow: var(--shadow);
}

.tool-card h2 {
    margin-bottom: 10px;
}

.network-form {
    margin-top: 30px;
}

.network-form label {
    display: block;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 700;
}

.input-row {
    display: flex;
    gap: 12px;
}

.input-row input {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    font-family: "DM Mono", monospace;
    font-size: 14px;
    outline: none;
}

.input-row input:focus {
    border-color: var(--accent2);
}

.error-box {
    margin-top: 25px;
    padding: 15px;
    border-radius: 12px;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    color: #be123c;
}

.results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 35px;
}

.result-card {
    padding: 20px;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #f8fafc;
}

.result-card span {
    display: block;
    margin-bottom: 8px;
    font: 500 10px "DM Mono", monospace;
    color: #718096;
    text-transform: uppercase;
}

.result-card strong {
    font: 600 16px "DM Mono", monospace;
    word-break: break-word;
}

@media (max-width: 700px) {

    .input-row {
        flex-direction: column;
    }

    .results {
        grid-template-columns: 1fr;
    }

    .tool-card {
        padding: 25px;
    }
}

.subnet-results {
    margin-top: 40px;
}

.subnet-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 20px;
}

.subnet-summary div {
    padding: 20px;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 15px;
}

.subnet-summary span {
    display: block;
    font: 500 10px "DM Mono", monospace;
    color: #718096;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.subnet-summary strong {
    font: 700 24px "DM Mono", monospace;
}

.subnet-table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--line);
    border-radius: 15px;
}

.subnet-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 850px;
    background: white;
}

.subnet-table th {
    text-align: left;
    padding: 15px;
    background: #f8fafc;
    border-bottom: 1px solid var(--line);
    font: 500 10px "DM Mono", monospace;
    text-transform: uppercase;
    color: #64748b;
}

.subnet-table td {
    padding: 16px 15px;
    border-bottom: 1px solid var(--line);
    font-size: 13px;
    color: #475569;
}

.subnet-table tbody tr:last-child td {
    border-bottom: none;
}

.subnet-table td strong {
    font-family: "DM Mono", monospace;
    color: var(--ink);
}

.dns-result {
    margin-top: 35px;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}

.dns-header,
.dns-section {
    padding: 22px;
    border-bottom: 1px solid var(--line);
}

.dns-section:last-child {
    border-bottom: none;
}

.dns-header {
    background: #f8fafc;
}

.dns-header span,
.dns-section > span {
    display: block;
    margin-bottom: 8px;
    font: 500 10px "DM Mono", monospace;
    color: #718096;
    text-transform: uppercase;
}

.dns-header strong,
.dns-section > strong {
    font: 600 16px "DM Mono", monospace;
    color: var(--ink);
}

.ip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.ip-item {
    padding: 10px 14px;
    background: #f1f5f9;
    border: 1px solid var(--line);
    border-radius: 10px;
    font: 500 13px "DM Mono", monospace;
}

/* =========================================
   NETWORK TOOLKIT DASHBOARD
   ========================================= */

.toolkit-intro {
    margin-bottom: 35px;
}

.toolkit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.toolkit-card {
    display: flex;
    gap: 22px;
    padding: 28px;
    background: #ffffff;
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    transition: transform 0.2s ease,
                box-shadow 0.2s ease;
}

.toolkit-card:hover {
    transform: translateY(-4px);
}

.tool-number {
    flex: 0 0 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f1f5f9;
    font: 600 13px "DM Mono", monospace;
    color: var(--accent2);
}

.tool-content {
    flex: 1;
}

.tool-content h3 {
    margin: 0 0 10px;
    font-size: 20px;
}

.tool-content p {
    margin: 0 0 18px;
    line-height: 1.7;
    color: #64748b;
}

.tool-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.tool-tags span {
    padding: 6px 9px;
    border-radius: 7px;
    background: #f8fafc;
    border: 1px solid var(--line);
    font: 500 10px "DM Mono", monospace;
    color: #64748b;
}

.tool-link {
    display: inline-block;
    font-weight: 700;
    text-decoration: none;
    color: var(--accent2);
}

.tool-link:hover {
    text-decoration: underline;
}

.toolkit-footer {
    margin-top: 35px;
    padding: 22px;
    text-align: center;
    border-top: 1px solid var(--line);
    color: #64748b;
}

.toolkit-footer strong {
    color: var(--ink);
}


/* Mobile */

@media (max-width: 800px) {

    .toolkit-grid {
        grid-template-columns: 1fr;
    }

    .toolkit-card {
        padding: 22px;
    }

}

@media (max-width: 500px) {

    .toolkit-card {
        flex-direction: column;
    }

    .tool-number {
        width: 48px;
    }

}

/* =========================================
   TOOL NAVIGATION
   ========================================= */

.tool-back {
    padding-top: 25px;
}

.tool-back a {
    display: inline-block;
    text-decoration: none;
    font: 500 12px "DM Mono", monospace;
    color: var(--accent2);
    transition: opacity 0.2s ease;
}

.tool-back a:hover {
    opacity: 0.7;
}

/* =========================================
   NETWORK TOOLKIT V2 - PROFESSIONAL UI
   ========================================= */

.toolkit-hero {
    padding: 90px 0 75px;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(45, 212, 191, 0.10),
            transparent 35%
        ),
        linear-gradient(
            135deg,
            #08111f,
            #0d1728
        );
    color: #ffffff;
}

.toolkit-hero-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 70px;
    align-items: center;
}

.toolkit-eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    font: 500 11px "DM Mono", monospace;
    letter-spacing: 1.5px;
    color: #94a3b8;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2dd4bf;
    box-shadow: 0 0 12px rgba(45, 212, 191, 0.8);
}

.toolkit-hero h1 {
    margin: 0;
    font-size: clamp(56px, 8vw, 96px);
    line-height: 0.95;
    letter-spacing: -4px;
}

.toolkit-hero h1 span {
    color: #2dd4bf;
}

.toolkit-lead {
    max-width: 680px;
    margin: 30px 0;
    font-size: 19px;
    line-height: 1.8;
    color: #a9b8ca;
}

.toolkit-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 20px;
    border: 1px solid #334155;
    border-radius: 10px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
}

.btn-secondary:hover {
    border-color: #64748b;
}


/* Status Card */

.network-status-card {
    position: relative;
    overflow: hidden;
    padding: 30px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.045);
    backdrop-filter: blur(15px);
}

.status-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
}

.status-label {
    display: block;
    margin-bottom: 8px;
    font: 500 10px "DM Mono", monospace;
    letter-spacing: 1px;
    color: #64748b;
}

.status-card-top h3 {
    margin: 0;
    font-size: 26px;
}

.live-indicator {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(45, 212, 191, 0.25);
    border-radius: 20px;
    font: 600 9px "DM Mono", monospace;
    color: #2dd4bf;
}

.live-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #2dd4bf;
}

.network-line {
    height: 1px;
    margin: 25px 0;
    background: #263548;
}

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

.status-metrics strong,
.status-metrics span {
    display: block;
}

.status-metrics strong {
    margin-bottom: 5px;
    font-size: 18px;
}

.status-metrics span {
    font: 500 10px "DM Mono", monospace;
    color: #64748b;
}

.network-pattern {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-top: 35px;
    opacity: 0.35;
}

.network-pattern span {
    height: 1px;
    background: #2dd4bf;
}


/* Statistics */

.toolkit-stats {
    border-bottom: 1px solid var(--line);
    background: #ffffff;
}

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

.toolkit-stat {
    padding: 28px 20px;
    text-align: center;
    border-right: 1px solid var(--line);
}

.toolkit-stat:last-child {
    border-right: none;
}

.toolkit-stat strong,
.toolkit-stat span {
    display: block;
}

.toolkit-stat strong {
    margin-bottom: 6px;
    font-size: 26px;
}

.toolkit-stat span {
    font: 500 10px "DM Mono", monospace;
    color: #718096;
}


/* Tools */

.toolkit-tools {
    background: #f8fafc;
}

.section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 40px;
}

.section-heading > p {
    margin: 0;
    color: #64748b;
}

.toolkit-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.toolkit-card {
    display: flex;
    gap: 22px;
    padding: 30px;
    border: 1px solid #dce3eb;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.toolkit-card:hover {
    transform: translateY(-5px);
    border-color: #cbd5e1;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}

.toolkit-card-featured {
    grid-column: span 2;
}

.tool-number {
    flex: 0 0 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #eef2ff;
    color: #6366f1;
    font: 600 12px "DM Mono", monospace;
}

.tool-content {
    flex: 1;
}

.tool-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    height: 28px;
    margin-bottom: 12px;
    padding: 0 9px;
    border-radius: 7px;
    background: #ecfeff;
    color: #0f766e;
    font: 600 10px "DM Mono", monospace;
}

.tool-content h3 {
    margin: 0 0 10px;
    font-size: 21px;
}

.tool-content p {
    max-width: 650px;
    margin: 0 0 18px;
    line-height: 1.7;
    color: #64748b;
}

.tool-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 20px;
}

.tool-tags span {
    padding: 6px 9px;
    border: 1px solid #dce3eb;
    border-radius: 7px;
    background: #f8fafc;
    color: #64748b;
    font: 500 10px "DM Mono", monospace;
}

.tool-link {
    display: inline-block;
    color: #4f46e5;
    text-decoration: none;
    font-weight: 700;
}

.tool-link:hover {
    text-decoration: underline;
}


/* Technology */

.toolkit-tech {
    padding: 80px 0;
    background: #ffffff;
}

.tech-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
    padding: 45px;
    border-radius: 24px;
    background: #0f172a;
    color: #ffffff;
}

.tech-panel h2 {
    margin: 0 0 18px;
    font-size: 34px;
}

.tech-panel p {
    max-width: 600px;
    line-height: 1.8;
    color: #94a3b8;
}

.tech-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tech-stack span {
    padding: 10px 13px;
    border: 1px solid #334155;
    border-radius: 9px;
    color: #cbd5e1;
    font: 500 10px "DM Mono", monospace;
}


/* Notice */

.toolkit-notice {
    padding: 0 0 70px;
    background: #ffffff;
}

.notice-box {
    padding: 20px 24px;
    border: 1px solid #fde68a;
    border-radius: 14px;
    background: #fffbeb;
}

.notice-box strong {
    display: block;
    margin-bottom: 6px;
    color: #92400e;
}

.notice-box p {
    margin: 0;
    line-height: 1.6;
    color: #92400e;
}


/* Responsive */

@media (max-width: 900px) {

    .toolkit-hero-grid {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .toolkit-stat:nth-child(2) {
        border-right: none;
    }

    .toolkit-stat:nth-child(-n+2) {
        border-bottom: 1px solid var(--line);
    }

    .toolkit-card-featured {
        grid-column: span 1;
    }

    .tech-panel {
        grid-template-columns: 1fr;
        gap: 35px;
    }

}


@media (max-width: 650px) {

    .toolkit-hero {
        padding: 65px 0 55px;
    }

    .toolkit-hero h1 {
        font-size: 58px;
        letter-spacing: -2px;
    }

    .toolkit-lead {
        font-size: 16px;
    }

    .section-heading {
        display: block;
    }

    .section-heading > p {
        margin-top: 15px;
    }

    .toolkit-grid {
        grid-template-columns: 1fr;
    }

    .toolkit-card {
        padding: 24px;
    }

    .toolkit-card-featured {
        grid-column: span 1;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .tech-panel {
        padding: 30px;
    }

}


@media (max-width: 480px) {

    .toolkit-hero h1 {
        font-size: 48px;
    }

    .toolkit-actions {
        flex-direction: column;
    }

    .toolkit-actions .btn {
        width: 100%;
    }

    .status-metrics {
        grid-template-columns: 1fr;
    }

    .toolkit-card {
        flex-direction: column;
    }

    .tool-number {
        width: 48px;
    }

}

/* =========================================
   PROJECTS PAGE
   ========================================= */

.projects-hero {
    padding: 90px 0 70px;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(45, 212, 191, 0.08),
            transparent 35%
        ),
        #08111f;
    color: #ffffff;
}

.projects-hero h1 {
    max-width: 800px;
    margin: 0;
    font-size: clamp(52px, 7vw, 86px);
    line-height: 0.98;
    letter-spacing: -3px;
}

.projects-hero h1 span {
    color: #2dd4bf;
}

.projects-intro {
    max-width: 700px;
    margin: 30px 0 0;
    color: #9fb0c3;
    font-size: 18px;
    line-height: 1.8;
}

.projects-section {
    background: #f8fafc;
}

.projects-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
}

.project-card {
    padding: 32px;
    border: 1px solid #dce3eb;
    border-radius: 22px;
    background: #ffffff;
    box-shadow: 0 10px 35px rgba(15, 23, 42, 0.05);
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        border-color 0.25s ease;
}

.project-card:hover {
    transform: translateY(-5px);
    border-color: #cbd5e1;
    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
}

.project-featured {
    grid-column: span 2;
    border-color: #b8e8e2;
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #f0fdfa
        );
}

.project-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.project-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: #eef2ff;
    color: #6366f1;
    font: 600 12px "DM Mono", monospace;
}

.project-status {
    padding: 7px 10px;
    border: 1px solid #99f6e4;
    border-radius: 20px;
    background: #f0fdfa;
    color: #0f766e;
    font: 600 9px "DM Mono", monospace;
}

.project-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 30px;
    margin-top: 25px;
    padding: 0 10px;
    border-radius: 8px;
    background: #ecfeff;
    color: #0f766e;
    font: 600 10px "DM Mono", monospace;
}

.project-card h2 {
    margin: 16px 0 12px;
    font-size: 25px;
}

.project-card p {
    max-width: 700px;
    margin: 0 0 20px;
    color: #64748b;
    line-height: 1.75;
}

.tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 22px;
}

.tag-row span {
    padding: 6px 9px;
    border: 1px solid #dce3eb;
    border-radius: 7px;
    background: #f8fafc;
    color: #64748b;
    font: 500 10px "DM Mono", monospace;
}

.project-features {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 20px;
    margin: 22px 0;
    padding: 18px 0;
    border-top: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
}

.project-features span {
    color: #475569;
    font-size: 13px;
}

.project-actions {
    margin-top: 22px;
}


/* Technology Panel */

.project-tech-section {
    padding: 80px 0;
    background: #ffffff;
}

.project-tech-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 45px;
    border-radius: 24px;
    background: #0f172a;
    color: #ffffff;
}

.project-tech-panel h2 {
    margin: 0 0 15px;
    font-size: 36px;
}

.project-tech-panel p {
    max-width: 580px;
    color: #94a3b8;
    line-height: 1.8;
}

.project-tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.project-tech-list span {
    padding: 10px 13px;
    border: 1px solid #334155;
    border-radius: 9px;
    color: #cbd5e1;
    font: 500 10px "DM Mono", monospace;
}


/* Responsive */

@media (max-width: 800px) {

    .projects-grid {
        grid-template-columns: 1fr;
    }

    .project-featured {
        grid-column: span 1;
    }

    .project-tech-panel {
        grid-template-columns: 1fr;
        gap: 35px;
    }

}

@media (max-width: 600px) {

    .projects-hero {
        padding: 65px 0 55px;
    }

    .projects-hero h1 {
        font-size: 52px;
        letter-spacing: -2px;
    }

    .projects-intro {
        font-size: 16px;
    }

    .project-card {
        padding: 24px;
    }

    .project-tech-panel {
        padding: 30px;
    }

}

/* =========================================
   NETWORK TOOLKIT PROJECT PAGE
   ========================================= */

.toolkit-project-hero {
    padding: 100px 0 90px;
    background:
        radial-gradient(
            circle at 80% 30%,
            rgba(45, 212, 191, 0.10),
            transparent 35%
        ),
        #08111f;
    color: #ffffff;
}

.toolkit-project-hero h1 {
    max-width: 850px;
    margin: 0;
    font-size: clamp(60px, 8vw, 100px);
    line-height: 0.95;
    letter-spacing: -4px;
}

.toolkit-project-hero h1 span {
    color: #2dd4bf;
}

.toolkit-project-intro {
    max-width: 750px;
    margin: 35px 0 0;
    color: #9fb0c3;
    font-size: 20px;
    line-height: 1.8;
}

.toolkit-project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 35px;
}


/* Overview */

.toolkit-overview {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: start;
    margin-bottom: 70px;
}

.toolkit-overview h2 {
    margin: 0;
    font-size: 44px;
    line-height: 1.1;
}

.toolkit-overview h2 span {
    color: #14b8a6;
}

.toolkit-overview p {
    margin: 0 0 20px;
    color: #64748b;
    line-height: 1.8;
}


/* Tools */


}

.toolkit-tool-card {
    padding: 30px;
    border: 1px solid #dce3eb;
    border-radius: 20px;
    background: #ffffff;
    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.toolkit-tool-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
}

.tool-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #eef2ff;
    color: #6366f1;
    font: 600 11px "DM Mono", monospace;
}

.toolkit-tool-card h3 {
    margin: 20px 0 10px;
    font-size: 22px;
}

.toolkit-tool-card p {
    min-height: 55px;
    margin: 0 0 20px;
    color: #64748b;
    line-height: 1.7;
}

.toolkit-tool-card a {
    color: #4f46e5;
    font-weight: 600;
    text-decoration: none;
}


/* Technology */

.toolkit-tech-section {
    padding: 90px 0;
    background: #f8fafc;
}

.toolkit-tech-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    padding: 50px;
    border-radius: 25px;
    background: #0f172a;
    color: #ffffff;
}

.toolkit-tech-panel h2 {
    margin: 0 0 18px;
    font-size: 38px;
    line-height: 1.15;
}

.toolkit-tech-panel h2 span {
    color: #2dd4bf;
}

.toolkit-tech-panel p {
    color: #94a3b8;
    line-height: 1.8;
}

.toolkit-tech-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.toolkit-tech-list span {
    padding: 10px 13px;
    border: 1px solid #334155;
    border-radius: 9px;
    color: #cbd5e1;
    font: 500 10px "DM Mono", monospace;
}


/* Learning */

.learning-panel {
    max-width: 850px;
    padding: 45px;
    border-left: 3px solid #2dd4bf;
    background: #f8fafc;
}

.learning-panel h2 {
    margin: 0 0 18px;
    font-size: 36px;
}

.learning-panel p {
    color: #64748b;
    line-height: 1.8;
}


/* Responsible use */

.toolkit-responsible-use {
    padding: 25px 0;
    background: #fffbeb;
    border-top: 1px solid #fde68a;
}

.toolkit-responsible-use strong {
    color: #92400e;
}

.toolkit-responsible-use p {
    margin: 8px 0 0;
    color: #92400e;
    line-height: 1.6;
}


/* Responsive */

@media (max-width: 800px) {

    .toolkit-overview {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .toolkit-tools {
        grid-template-columns: 1fr;
    }

    .toolkit-tech-panel {
        grid-template-columns: 1fr;
        gap: 35px;
    }

}

@media (max-width: 600px) {

    .toolkit-project-hero {
        padding: 70px 0;
    }

    .toolkit-project-hero h1 {
        font-size: 60px;
        letter-spacing: -2px;
    }

    .toolkit-project-intro {
        font-size: 17px;
    }

    .toolkit-overview h2 {
        font-size: 36px;
    }

    .toolkit-tech-panel,
    .learning-panel {
        padding: 30px;
    }

}

/* Project page action buttons */

.project-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.project-actions .btn-secondary {
    color: #0f172a !important;
    background: #ffffff !important;
    border: 1px solid #64748b !important;
}

.project-actions .btn-secondary:hover {
    color: #ffffff !important;
    background: #0f172a !important;
    border-color: #0f172a !important;
}

/* ============================================================
   SECURE PORT SCANNER
   ============================================================ */

.scanner-page {
    min-height: 80vh;
    padding: 90px 20px;
    background: #f7f9fc;
}

.scanner-container {
    width: min(1100px, 100%);
    margin: 0 auto;
}

.scanner-kicker {
    margin-bottom: 14px;

    color: #6674e8;

    font-size: 12px;
    font-weight: 800;
    letter-spacing: 3px;
}

.scanner-page h1 {
    margin: 0;

    color: #0b1324;

    font-size: clamp(42px, 6vw, 70px);
    line-height: 1;
    letter-spacing: -3px;
}

.scanner-page h1 span {
    color: #20bfae;
}

.scanner-intro {
    max-width: 700px;
    margin: 25px 0 50px;

    color: #64748b;

    font-size: 17px;
    line-height: 1.8;
}


/* Header */

.scanner-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 40px;
}

.scanner-credit {
    padding: 14px 18px;

    border: 1px solid #dce5ee;
    border-radius: 14px;

    background: #ffffff;

    color: #718096;

    font-size: 13px;
}

.scanner-credit strong {
    margin-right: 5px;

    color: #20bfae;

    font-size: 24px;
}


/* Card */

.scanner-card {
    padding: 38px;

    border: 1px solid #e0e7ef;
    border-radius: 24px;

    background: #ffffff;

    box-shadow:
        0 18px 50px rgba(15, 35, 65, 0.07);

    margin-bottom: 25px;
}

.scanner-login-card {
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.scanner-lock {
    width: 68px;
    height: 68px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 22px;

    border-radius: 20px;

    background: #e8faf7;

    font-size: 30px;
}

.scanner-card h2 {
    margin: 0 0 12px;

    color: #101827;

    font-size: 28px;
}

.scanner-card > p {
    color: #718096;
    line-height: 1.7;
}


/* Form */

.scanner-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.scanner-field label,
.scanner-login-card form label {
    color: #263449;

    font-size: 13px;
    font-weight: 700;
}

.scanner-field input,
.scanner-login-card form input {
    width: 100%;
    box-sizing: border-box;

    min-height: 50px;
    padding: 0 15px;

    border: 1px solid #d7e0ea;
    border-radius: 11px;

    outline: none;

    background: #fbfcfe;

    color: #182235;

    font-size: 15px;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}

.scanner-field input:focus,
.scanner-login-card form input:focus {
    border-color: #20bfae;

    box-shadow:
        0 0 0 4px rgba(32, 191, 174, 0.10);
}

.scanner-login-card form {
    text-align: left;
}

.scanner-login-card form input {
    margin-top: 8px;
    margin-bottom: 18px;
}

.scanner-form-grid {
    display: grid;

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

    gap: 18px;

    margin-bottom: 25px;
}


/* Authorization */

.scanner-warning {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-bottom: 25px;
    padding: 16px;

    border: 1px solid #f0dfad;
    border-radius: 12px;

    background: #fffaf0;

    color: #765f20;

    font-size: 13px;
    line-height: 1.6;
}

.scanner-warning input {
    margin-top: 3px;
}


/* Button */

.scanner-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 50px;

    padding: 0 24px;

    border: 0;
    border-radius: 11px;

    background: #20bfae;
    color: #06131b;

    text-decoration: none;

    font-size: 14px;
    font-weight: 800;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        opacity 0.2s ease;
}

.scanner-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 10px 25px rgba(32, 191, 174, 0.22);

    opacity: 0.92;
}


/* Messages */

.scanner-message {
    margin: 20px 0;
    padding: 14px 16px;

    border-radius: 11px;

    font-size: 14px;
}

.scanner-message.error {
    border: 1px solid #f0c8c8;

    background: #fff3f3;

    color: #a63c3c;
}


/* Results */

.results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;

    margin-bottom: 30px;
}

.result-count {
    padding: 12px 16px;

    border-radius: 12px;

    background: #e8faf7;

    color: #218f84;

    font-size: 13px;
}

.result-count strong {
    margin-right: 5px;

    font-size: 24px;
}

.result-summary {
    display: grid;

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

    gap: 12px;

    margin-bottom: 30px;
}

.result-summary > div {
    padding: 18px;

    border-radius: 14px;

    background: #f6f8fb;
}

.result-summary span {
    display: block;

    margin-bottom: 7px;

    color: #8190a4;

    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.result-summary strong {
    color: #172238;

    font-size: 14px;

    word-break: break-word;
}


/* Table */

.port-table-wrapper {
    overflow-x: auto;

    border: 1px solid #e1e7ee;
    border-radius: 15px;
}

.port-table {
    width: 100%;

    border-collapse: collapse;
}

.port-table th,
.port-table td {
    padding: 15px 18px;

    text-align: left;

    border-bottom: 1px solid #edf1f5;
}

.port-table th {
    background: #f7f9fc;

    color: #66758b;

    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.port-table td {
    color: #4b5c72;

    font-size: 14px;
}

.status-open {
    display: inline-block;

    padding: 5px 9px;

    border-radius: 7px;

    background: #e6f8f4;

    color: #168779;

    font-size: 11px;
    font-weight: 800;
}


/* No results */

.no-results {
    padding: 45px 20px;

    text-align: center;
}

.no-results > div {
    width: 55px;
    height: 55px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0 auto 15px;

    border-radius: 50%;

    background: #e8faf7;

    color: #20a895;

    font-size: 22px;
}

.no-results h3 {
    margin-bottom: 8px;

    color: #1b2739;
}

.no-results p {
    margin: 0;

    color: #75859a;
}


/* Remaining */

.remaining-scans {
    margin-top: 20px;
    padding: 15px;

    border-radius: 11px;

    background: #f5f7fa;

    color: #66758b;

    text-align: center;

    font-size: 13px;
}

.remaining-scans strong {
    color: #20a895;
}


/* Admin */

.generated-pin {
    margin: 30px 0;

    padding: 25px;

    border: 2px dashed #20bfae;
    border-radius: 16px;

    background: #effcf9;

    color: #102d35;

    font-family: monospace;

    font-size: 42px;
    font-weight: 900;

    letter-spacing: 8px;

    text-align: center;
}

.pin-details {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 12px;

    margin-bottom: 25px;
}

.pin-details > div {
    padding: 15px;

    border-radius: 12px;

    background: #f6f8fb;
}

.pin-details span {
    display: block;

    margin-bottom: 6px;

    color: #8391a4;

    font-size: 11px;
    text-transform: uppercase;
}

.pin-details strong {
    color: #253349;

    font-size: 14px;
}


/* Footer actions */

.scanner-footer-actions {
    display: flex;

    justify-content: center;

    gap: 25px;

    margin-top: 25px;
}

.scanner-footer-actions a {
    color: #6174e8;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;
}

.scanner-footer-actions a:hover {
    text-decoration: underline;
}


/* Responsive */

@media (max-width: 850px) {

    .scanner-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .scanner-form-grid {
        grid-template-columns: 1fr;
    }

    .result-summary {
        grid-template-columns: 1fr 1fr;
    }
}


@media (max-width: 600px) {

    .scanner-page {
        padding: 60px 15px;
    }

    .scanner-card {
        padding: 25px;
        border-radius: 18px;
    }

    .result-summary {
        grid-template-columns: 1fr;
    }

    .pin-details {
        grid-template-columns: 1fr;
    }

    .generated-pin {
        font-size: 31px;
        letter-spacing: 5px;
    }

    .scanner-footer-actions {
        flex-direction: column;
        align-items: center;
    }
}