/* Terminal */
/* GŁÓWNY KONTENER TERMINALA */
.dropin-terminal {
  display: flex !important;
  flex-direction: column !important;
  background-color: #000000 !important;
  border: 1px solid #00f0ff !important; /* RAMKA */
  border-radius: 10px !important;
  width: 380px !important;
  height: 300px !important;
  margin: 20px auto !important;
  overflow: hidden !important;
  box-shadow: 0 0 20px rgba(0, 240, 255, 0.2) !important;
  position: relative !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.dropin-terminal-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 8px 12px !important;
  background: #111 !important;
  border-bottom: 1px solid rgba(0, 240, 255, 0.2) !important;
}

.dropin-dots { display: flex !important; gap: 6px !important; }
.dot { width: 10px !important; height: 10px !important; border-radius: 50% !important; }
.red { background: #ff5f56 !important; }
.yellow { background: #ffbd2e !important; }
.green { background: #27c93f !important; }

.dropin-terminal-body {
  padding: 15px !important;
  font-family: 'Courier New', Courier, monospace !important;
  font-size: 14px !important;
  color: #00f0ff !important;
  background: #000 !important;
  flex: 1 !important;
  overflow-y: auto !important;
  text-align: left !important;
}

/* LINIE TEKSTU */
.line { 
  display: flex !important; 
  align-items: flex-start !important; 
  margin-bottom: 4px !important; 
  width: 100%;
}

.prompt { 
  color: #888 !important; 
  margin-right: 8px !important; 
  flex-shrink: 0 !important; /* Blokuje przesuwanie się dolara */
  user-select: none;
}

.typing { 
  word-break: break-word !important; 
  white-space: pre-wrap !important; /* Zachowuje spacje */
}

.cursor { 
  display: inline-block !important; 
  width: 8px !important; 
  height: 15px !important; 
  background: #00f0ff !important; 
  margin-left: 4px !important;
  flex-shrink: 0 !important;
  animation: blink 1s steps(2, start) infinite !important; 
}

@keyframes blink { 50% { opacity: 0; } }

.ok { color: #4dff4d !important; }
.warn { color: #ffbd2e !important; }
.critical { color: #ff4d4d !important; }
/*terminal end */
:root {
  --bg:#05070d;
  --accent:#00f0ff;
  --text:#e5e7eb;
  --muted:#94a3b8;
  --shield-glow: rgba(0, 240, 255, 0.3);
}
  /* inter-300 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/inter-v20-latin-ext-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-ext-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* inter-regular - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/inter-v20-latin-ext-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-ext-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* inter-500 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/inter-v20-latin-ext-500.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-ext-500.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* inter-700 - latin-ext */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/inter-v20-latin-ext-700.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/inter-v20-latin-ext-700.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}


/* RESET & BASE */
*{margin:0;padding:0;box-sizing:border-box;font-family:'Inter',sans-serif;}
body{
  background: radial-gradient(circle at 20% 20%, #0a0f1f, #05070d);
  color:var(--text);
  overflow-x:hidden;
  position:relative;
}

/* BACKGROUND GRID */
body::before {
  content:""; position:fixed; width:200%; height:200%;
  background-image: linear-gradient(rgba(0,240,255,0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(0,240,255,0.05) 1px, transparent 1px);
  background-size:40px 40px; animation:moveGrid 20s linear infinite; z-index:-1;
}
@keyframes moveGrid{from{transform:translate(0,0);}to{transform:translate(-40px,-40px);}}

/* GLOW & LINKS */
.cursor-glow{
  position: fixed; width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(0,240,255,0.12), transparent 70%);
  pointer-events: none; transform: translate(-50%, -50%); z-index:100; transition:0.1s;
}
a { color: var(--accent); text-decoration: none; transition: 0.3s; }
a:hover { text-shadow: 0 0 10px var(--accent); text-decoration: underline; }

/* NAV */
header{position:fixed;width:100%;padding:20px 10%;backdrop-filter:blur(10px);background:rgba(0,0,0,0.4);z-index:1000; border-bottom: 1px solid rgba(255,255,255,0.05);}
nav{display:flex;justify-content:space-between;align-items:center;}

/* HERO */
.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}
.hero-content { max-width: 650px; }
.hero h1{font-size:64px;line-height:1.1;}
.hero span{color:var(--accent);text-shadow:0 0 20px rgba(0,240,255,0.7);}
.hero p{margin:20px 0; color:var(--muted); font-size: 18px;}

/* SECTIONS */
section{padding:80px 10%; position:relative; z-index:1;}
h2 { font-size: 32px; margin-bottom: 40px; text-transform: uppercase; letter-spacing: 2px; }

/* SERVICES GRID */
.steps{display:flex; gap:20px; flex-wrap: wrap;}
.step{
  flex:1; min-width: 300px; padding:30px;
  background: linear-gradient(180deg, rgba(0,240,255,0.05) 0%, rgba(5,7,13,1) 100%);
  border-radius:10px; border-top: 2px solid var(--accent); transition: 0.3s;
}
.step:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,240,255,0.1); }

/* kontener sekcji */
#cases {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* CASE STUDY TERMINAL */
.case-card {
    width: 60%;
    background: rgba(255,255,255,0.02);
    padding: 25px 30px;
    border-radius: 10px;
    border-left: 3px solid var(--accent);
    font-family: 'Inter', sans-serif;
    position: relative;
}

/* LEWA strona (1,3) */
.case-card:nth-child(odd) {
    align-self: flex-start;
}

/* PRAWA strona (2,4) */
.case-card:nth-child(even) {
    align-self: flex-end;
}

/* delikatne przesunięcie dla dynamiki */
.case-card:nth-child(even) {
    border-left: none;
    border-right: 3px solid var(--accent);
}

/* terminal text */
.terminal-text {
    font-family: monospace;
    color: var(--muted);
    line-height: 1.6;
}

.terminal-text b {
    color: var(--accent);
}
/* lekki offset żeby nie było idealnie symetrycznie */
.case-card:nth-child(odd) {
    margin-left: 5%;
}

.case-card:nth-child(even) {
    margin-right: 5%;
}

/* hover = lekki fokus */
.case-card:hover {
    background: rgba(0,240,255,0.04);
    transition: 0.2s ease;
}

/* FOOTER */
footer { padding: 60px 10% 40px; background: rgba(0,0,0,0.9); text-align: center; color: var(--muted); font-size: 14px; }
.footer-links { margin-top: 20px; display: flex; justify-content: center; gap: 30px; }
/* Pasek Security Check */
#browser-warning {
  display: none; /* Domyślnie ukryty */
  position: fixed; top: 0; left: 0; width: 100%;
  background: #ff4d4d; color: white;
  padding: 12px 20px; text-align: center;
  z-index: 9999; font-weight: 500; font-size: 14px;
  box-shadow: 0 4px 15px rgba(255, 77, 77, 0.4);
}
#browser-warning b { text-decoration: underline; cursor: pointer;
}

@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* MODALE WYŚRODKOWANE */
.modal {
  position: fixed; top:0; left:0; width:100%; height:100%;
  background: rgba(5,7,13,0.95);
  z-index:9999;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; pointer-events:none;
  transition: opacity 0.2s ease-out;
}
.modal.show {
  opacity:1; visibility:visible; pointer-events:auto;
}
.modal-content {
  background:#111; border:2px solid #00f0ff; border-radius:8px;
  padding:20px; width:90%; max-width:500px; color:#0ff; text-align:left;
}
.modal-content h3 { margin-top:0; color:#00f0ff; text-shadow:0 0 10px #00f0ff; }
.modal-content textarea {
  width:100%; height:120px; background:#111; color:#0ff; border:none;
  resize:none; font-family:monospace; margin-bottom:10px; padding:5px;
}
.modal-content button {
  background:#00f0ff; color:#000; border:none; padding:5px 10px; cursor:pointer; margin-right:5px;
  transition:0.3s;
}
.modal-content button:hover { background:#fff; color:#00f0ff; }

@keyframes fadeIn { from{opacity:0;} to{opacity:1;} }

/* FOOTER CYBERPUNK */
.cyber-footer {
  background:#05070d; color:#e5e7eb; padding:40px 20px; font-family:'Inter',sans-serif; text-align:center; position:relative;
}
.cyber-footer::before{
  content:""; position:absolute; top:0; left:0; width:100%; height:100%;
  background: radial-gradient(circle at center, rgba(0,255,255,0.05), transparent 80%);
  pointer-events:none;
}
.footer-title{
  font-size:18px; font-weight:bold; color:#00f0ff;
  text-shadow:0 0 10px #00f0ff,0 0 20px #00ffff; margin-bottom:20px;
  animation: glitch 2s infinite;
}
.footer-links a{
  margin:0 10px; color:#00f0ff; text-decoration:none; border-bottom:1px solid #00f0ff; transition:0.3s;
}
.footer-links a:hover { color:#fff; border-bottom-color:#fff; text-shadow:0 0 15px #00f0ff; }

/* GLITCH ANIMATION */
@keyframes glitch {
  0%{text-shadow:0 0 5px #00f0ff,0 0 10px #00ffff;}
  25%{text-shadow:-1px 0 5px #ff00ff,1px 0 5px #00ffff;}
  50%{text-shadow:1px 0 5px #00ff00,-1px 0 5px #00ffff;}
  75%{text-shadow:-2px 0 10px #ff00ff,2px 0 10px #00ffff;}
  100%{text-shadow:0 0 5px #00f0ff,0 0 10px #00ffff;}
}