/* =====================================================
   ZeroDay Focus — Cybersecurity Consulting
   Token system:
   Color   : --ink #0B0D10 (dasar profesional gelap), --ink-2 #14171C, --crimson #E63946
             (aksen ancaman/alert, bukan neon hacker-cliché), --paper #F7F8FA, --grey #5C6470
   Type    : Display = "Chakra Petch" (angular, teknikal-cyber), Body = "Inter"
   Filosofi: profesional & tepercaya, bukan estetika "hacker" — cocok B2B enterprise
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  --ink:#0B0D10;
  --ink-2:#14171C;
  --ink-3:#1D2127;
  --crimson:#E63946;
  --crimson-deep:#C4222F;
  --paper:#F7F8FA;
  --paper-2:#EDEFF3;
  --grey:#5C6470;
  --line:#262B33;
  --maxw:1180px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Inter',system-ui,sans-serif; font-size:16px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Chakra Petch',sans-serif; font-weight:700; line-height:1.25; margin:0 0 .5em; color:var(--ink);}
p{margin:0 0 1em; color:var(--grey);}
a{color:var(--ink); text-decoration:none;}
a:hover{color:var(--crimson);}
img,svg{max-width:100%; display:block;}
.mono{font-family:'JetBrains Mono',monospace;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.skip-link{position:absolute; left:-999px; top:0; background:var(--ink); color:#fff; padding:10px 16px; z-index:999;}
.skip-link:focus{left:16px; top:16px;}

/* ===== Header ===== */
header.site-header{background:var(--ink); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:50;}
.nav{display:flex; align-items:center; justify-content:space-between; padding:18px 0;}
.logo{display:flex; align-items:center; gap:10px; font-family:'Chakra Petch',sans-serif; font-weight:700; font-size:19px; color:#fff; letter-spacing:.01em;}
.logo:hover{color:#fff;}
.logo .bracket{color:var(--crimson);}
.nav-links{display:flex; gap:26px; align-items:center;}
.nav-links a{font-size:13.5px; font-weight:500; color:#9CA3B0;}
.nav-links a:hover{color:#fff;}
.btn{
  display:inline-flex; align-items:center; gap:8px; background:var(--crimson); color:#fff;
  padding:12px 24px; font-weight:600; font-size:13.5px; border:1px solid var(--crimson); border-radius:4px;
  transition:.15s ease;
}
.btn:hover{background:var(--crimson-deep); border-color:var(--crimson-deep);}
.btn-outline{background:transparent; color:#fff; border:1px solid #3A4048;}
.btn-outline:hover{border-color:var(--crimson); color:var(--crimson);}

/* ===== Hero ===== */
.hero{position:relative; padding:72px 0 60px; background:var(--ink); overflow:hidden;}
.hero::before{
  content:""; position:absolute; inset:0; opacity:.05;
  background-image:linear-gradient(#fff 1px, transparent 1px), linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size:40px 40px;
}
.hero-grid{position:relative; z-index:1; max-width:760px;}
.eyebrow{display:inline-flex; align-items:center; gap:8px; font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--crimson); font-weight:500; margin-bottom:20px; border:1px solid rgba(230,57,70,.35); background:rgba(230,57,70,.08); padding:6px 14px; border-radius:999px;}
.eyebrow .dot{width:6px; height:6px; border-radius:50%; background:var(--crimson);}
.hero h1{color:#fff; font-size:44px;}
.hero .lede{color:#AEB4C0; font-size:16.5px; max-width:600px; margin:18px 0 32px;}
.hero-cta{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:40px;}
.hero-stats{display:flex; gap:0; border-top:1px solid var(--line); max-width:640px;}
.hstat{padding:18px 26px 0 0; margin-right:26px; border-right:1px solid var(--line);}
.hstat:last-child{border-right:none;}
.hstat b{display:block; font-family:'Chakra Petch',sans-serif; font-size:24px; color:var(--crimson);}
.hstat span{font-size:11px; color:#7C8492; text-transform:uppercase; letter-spacing:.04em;}

/* ===== Sections ===== */
section{padding:64px 0;}
.section-head{max-width:640px; margin-bottom:36px;}
.section-head .eyebrow{color:var(--crimson-deep); border-color:rgba(196,34,47,.3); background:rgba(196,34,47,.06);}
.section-head h2{font-size:28px;}
.section-head.center{max-width:640px; margin-left:auto; margin-right:auto; text-align:center;}

/* ===== Services grid ===== */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.svc-card{background:#fff; border:1px solid var(--paper-2); border-radius:10px; padding:28px; transition:.15s;}
.svc-card:hover{border-color:var(--crimson); box-shadow:0 16px 32px -24px rgba(230,57,70,.3);}
.svc-card .icon{width:44px; height:44px; border-radius:8px; background:var(--ink); display:flex; align-items:center; justify-content:center; margin-bottom:18px;}
.svc-card h3{font-size:17px; margin-bottom:10px;}
.svc-card p{font-size:13.5px; margin:0;}

/* ===== Methodology (numbered steps, dark) ===== */
.method-section{background:var(--ink); border-radius:16px; padding:56px 40px;}
.method-section .section-head h2, .method-section .section-head p{color:#fff;}
.method-section .section-head p{color:#AEB4C0;}
.method-row{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.method-step{background:var(--ink-2); padding:28px 22px;}
.method-step .step-num{font-family:'JetBrains Mono',monospace; font-size:13px; color:var(--crimson); margin-bottom:14px;}
.method-step h4{color:#fff; font-size:15.5px; margin-bottom:8px;}
.method-step p{color:#8B93A2; font-size:13px; margin:0;}

/* ===== Industries ===== */
.industry-row{display:flex; flex-wrap:wrap; gap:12px;}
.industry-chip{font-size:13.5px; font-weight:500; padding:11px 20px; border-radius:999px; border:1px solid var(--paper-2); color:var(--ink); background:#fff;}

/* ===== Why us ===== */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.why-card{padding:24px; text-align:left;}
.why-card .icon{width:40px; height:40px; border-radius:8px; background:var(--paper-2); display:flex; align-items:center; justify-content:center; margin-bottom:14px;}
.why-card h3{font-size:15.5px; margin-bottom:6px;}
.why-card p{font-size:13px; margin:0;}

/* ===== CTA band ===== */
.cta-band{background:linear-gradient(135deg, var(--ink), var(--ink-3)); border-radius:16px; padding:56px 40px; text-align:center;}
.cta-band h2{color:#fff; font-size:28px;}
.cta-band p{color:#AEB4C0;}

/* ===== Footer ===== */
footer{background:var(--ink); color:#7C8492; padding:52px 0 26px; margin-top:20px;}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:40px; margin-bottom:38px;}
.footer-grid .logo{color:#fff;}
.footer-grid h5{font-family:'Chakra Petch',sans-serif; font-size:14px; color:#fff; margin-bottom:14px;}
.footer-grid a{display:block; font-size:13.5px; color:#7C8492; margin-bottom:10px;}
.footer-grid a:hover{color:var(--crimson);}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#525966; border-top:1px solid var(--line); padding-top:20px; flex-wrap:wrap; gap:10px;}

/* ===== Responsive ===== */
@media (max-width:980px){
  .hero h1{font-size:31px;}
  .grid-3{grid-template-columns:1fr;}
  .method-row{grid-template-columns:1fr;}
  .grid-4{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr; gap:24px;}
  .nav-links{display:none;}
}

a:focus-visible, button:focus-visible, .btn:focus-visible{outline:2px solid var(--crimson); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{transition:none !important; scroll-behavior:auto !important;} }