/* ============================================================
   CSS CUSTOM PROPERTIES (variables)
   Referenced throughout as var(--name). Change once, updates everywhere.
   ============================================================ */
:root {
  --gold: #C9A84C;          /* primary gold accent */
  --gold-light: #E8C97A;    /* lighter gold for hover states */
  --gold-dim: #8A6E2F;      /* darker/muted gold for tags, subtle text */
  --bg: #060605;            /* darkest background (main page bg) */
  --bg2: #0D0D0A;           /* slightly lighter bg (alternating sections) */
  --bg3: #131310;           /* lightest bg (active cards) */
  --text: #EAE6DA;          /* primary text color */
  --text-dim: #7A7668;      /* secondary/muted text */
  --border: rgba(201,168,76,0.12); /* subtle gold-tinted border */
  --radius: 20px;           /* standard border-radius for cards */
  --radius-lg: 32px;        /* larger radius for bigger cards */
}

/* ============================================================
   RESET & BASE
   ============================================================ */

/* Remove default browser margin/padding on everything */
* { margin:0; padding:0; box-sizing:border-box; }

/* Smooth scrolling when clicking anchor links (e.g. #mission) */
html { scroll-behavior:smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  overflow-x: hidden; /* prevent horizontal scrollbar from blobs/animations */
}

/* ============================================================
   NAVIGATION
   Fixed pill-shaped nav bar centered at the top of the page.
   ============================================================ */
nav {
  position: fixed;           /* stays visible while scrolling */
  top: 1.5rem; left: 50%;
  transform: translateX(-50%); /* centers it regardless of screen width */
  z-index: 100;              /* sits above all other content */
  padding: 0.8rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 3rem;
  background: rgba(13,13,10,0.7); /* semi-transparent so content shows through */
  backdrop-filter: blur(24px);    /* frosted glass blur effect */
  border: 1px solid var(--border);
  border-radius: 100px;      /* pill shape */
  width: min(900px, 90vw);   /* max 900px, but never wider than 90% of screen */
}

.nav-logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.05em;
  text-decoration: none;
  white-space: nowrap; /* prevent the logo from wrapping to two lines */
}

/* Nav links list — horizontal row of links */
.nav-links { display:flex; gap:2rem; list-style:none; }
.nav-links a { font-size:0.8rem; color:var(--text-dim); text-decoration:none; letter-spacing:0.08em; transition:color 0.3s; }
.nav-links a:hover { color:var(--gold); }

/* "CesaConn" button in the top-right corner of the nav */
.nav-cta {
  background: var(--gold);
  color: var(--bg);
  border: none;
  padding: 0.5rem 1.2rem;
  border-radius: 100px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.3s;
  text-decoration: none;
  white-space: nowrap;
}
.nav-cta:hover { background: var(--gold-light); }

/* EN / PL toggle buttons */
.lang-switch { display:flex; gap:0.4rem; }
.lang-btn {
  background: none; border: 1px solid var(--border); color: var(--text-dim);
  padding: 0.25rem 0.7rem; cursor: pointer; font-family: 'Outfit', sans-serif;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  transition: all 0.3s; border-radius: 100px;
}
/* Highlighted state for the currently selected language */
.lang-btn.active, .lang-btn:hover { border-color:var(--gold); color:var(--gold); background:rgba(201,168,76,0.08); }

/* ============================================================
   HERO SECTION
   Full-screen opening section with animated background blobs.
   ============================================================ */
.hero {
  min-height: 100vh;         /* at least full screen height */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8rem 2rem 6rem;   /* extra top padding so content clears the fixed nav */
  position: relative;
  overflow: hidden;          /* clip the blobs so they don't cause scrollbars */
}

/* Base styles shared by all blobs */
.blob { position:absolute; border-radius:50%; filter:blur(55px); opacity:0.6; pointer-events:none; animation:linear infinite; }

/* Individual blob sizes, positions, and colors */
.blob-1 { width:600px;height:600px; background:radial-gradient(circle,#E8C97A 0%,#C9A84C 40%,transparent 75%); top:-150px;left:-150px; animation:blobFloat1 12s linear infinite; }
.blob-2 { width:500px;height:500px; background:radial-gradient(circle,#C9A84C 0%,#8A6E2F 45%,transparent 75%); bottom:-100px;right:-100px; opacity:0.5; animation:blobFloat2 14s linear infinite; }
.blob-3 { width:350px;height:350px; background:radial-gradient(circle,#E8C97A 0%,#C9A84C 50%,transparent 75%); top:30%;right:3%; opacity:0.35; animation:blobFloat3 10s linear infinite; }

/* Blob movement keyframes — each blob drifts on a unique path */
@keyframes blobFloat1 { 0%{transform:translate(0,0) scale(1)} 25%{transform:translate(140px,100px) scale(1.08)} 50%{transform:translate(80px,180px) scale(0.93)} 75%{transform:translate(-60px,90px) scale(1.05)} 100%{transform:translate(0,0) scale(1)} }
@keyframes blobFloat2 { 0%{transform:translate(0,0) scale(1)} 33%{transform:translate(-120px,-140px) scale(1.1)} 66%{transform:translate(-160px,-60px) scale(0.95)} 100%{transform:translate(0,0) scale(1)} }
@keyframes blobFloat3 { 0%{transform:translate(0,0) scale(1)} 50%{transform:translate(-140px,100px) scale(1.08)} 100%{transform:translate(0,0) scale(1)} }

/* Dark radial gradient overlay that fades the blobs toward the edges,
   keeping the center readable */
.hero-vignette { position:absolute;inset:0; background:radial-gradient(ellipse 80% 80% at 50% 50%,transparent 20%,rgba(6,6,5,0.75) 100%); pointer-events:none;z-index:1; }

/* Content sits above the blobs and vignette */
.hero-content { position:relative;z-index:2; display:flex;flex-direction:column;align-items:center; }

/* Small pill badge above the headline (e.g. "Independent security company") */
.hero-badge {
  display:inline-flex; align-items:center; gap:0.5rem;
  background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.2);
  padding:0.4rem 1.2rem; border-radius:100px;
  font-size:0.7rem; letter-spacing:0.15em; text-transform:uppercase; color:var(--gold);
  margin-bottom:2.5rem;
  opacity:0; animation:fadeUp 0.8s 0.2s forwards; /* starts invisible, fades in after 0.2s */
}

.hero h1 {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(3rem,8vw,6.5rem); /* responsive: min 3rem, scales with viewport, max 6.5rem */
  font-weight:300; line-height:1; letter-spacing:-0.02em;
  margin-bottom:0.8rem;
  opacity:0; animation:fadeUp 0.8s 0.4s forwards; /* delays 0.4s for staggered entrance */
}
.hero h1 em { font-style:italic; color:var(--gold); }

.hero-tagline {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.1rem,2.5vw,1.6rem);
  color:var(--text-dim); font-style:italic; letter-spacing:0.08em;
  margin-bottom:2rem;
  opacity:0; animation:fadeUp 0.8s 0.6s forwards;
}

.hero-desc {
  max-width:580px; font-size:1rem; line-height:1.8; color:var(--text-dim);
  margin-bottom:3rem;
  opacity:0; animation:fadeUp 0.8s 0.8s forwards;
}

.hero-cta {
  display:flex; gap:1rem; flex-wrap:wrap; justify-content:center;
  opacity:0; animation:fadeUp 0.8s 1s forwards;
}

/* Primary (gold filled) button */
.btn-primary {
  background:var(--gold); color:var(--bg); border:none;
  padding:0.9rem 2.5rem; border-radius:100px;
  font-family:'Outfit',sans-serif; font-size:0.85rem; font-weight:500;
  letter-spacing:0.08em; cursor:pointer; transition:all 0.3s; text-decoration:none; display:inline-block;
}
.btn-primary:hover { background:var(--gold-light); transform:translateY(-2px); box-shadow:0 8px 30px rgba(201,168,76,0.3); }

/* Secondary (transparent/outlined) button */
.btn-secondary {
  background:rgba(255,255,255,0.04); backdrop-filter:blur(10px);
  color:var(--text-dim); border:1px solid var(--border);
  padding:0.9rem 2.5rem; border-radius:100px;
  font-family:'Outfit',sans-serif; font-size:0.85rem;
  letter-spacing:0.08em; cursor:pointer; transition:all 0.3s; text-decoration:none; display:inline-block;
}
.btn-secondary:hover { border-color:var(--gold); color:var(--gold); }

/* Slide-up + fade-in animation used by hero elements on page load */
@keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} }

/* ============================================================
   SHARED SECTION STYLES
   ============================================================ */

/* All sections get generous vertical padding; max-width container inside */
section { padding:7rem 4rem; position:relative; }
.section-inner { max-width:1100px; margin:0 auto; }

/* Small label above section titles (e.g. "WHO WE ARE") with a gold line before it */
.section-eyebrow {
  font-size:0.7rem; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold);
  margin-bottom:1rem; display:flex; align-items:center; gap:0.8rem;
}
.section-eyebrow::before { content:''; width:24px;height:1px; background:var(--gold); }

.section-title {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(2.5rem,5vw,3.8rem); font-weight:300; line-height:1.1; margin-bottom:1.5rem;
}
.section-title em { font-style:italic; color:var(--gold); }

.section-sub { font-size:1rem; color:var(--text-dim); line-height:1.8; max-width:600px; margin-bottom:3.5rem; }

/* ============================================================
   MISSION SECTION
   Two-column layout: quote on left, body text on right.
   ============================================================ */
.mission { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.mission-layout {
  display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:center;
}

.mission-quote {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.8rem,3.5vw,2.8rem);
  font-weight:300; line-height:1.3; color:var(--text);
}
.mission-quote em { font-style:italic; color:var(--gold); }

.mission-text p {
  font-size:0.95rem; line-height:1.8; color:var(--text-dim); margin-bottom:1.5rem;
}
.mission-text p:last-child { margin-bottom:0; }

/* ============================================================
   VALUES SECTION
   Three-column card grid.
   ============================================================ */
.values { background:var(--bg); }

.values-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem;
}

.value-card {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:2.5rem;
  transition:all 0.4s; position:relative; overflow:hidden;
}

/* Subtle gold glow that appears on hover via the ::after pseudo-element */
.value-card::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(circle at 50% 0%,rgba(201,168,76,0.06) 0%,transparent 60%);
  opacity:0; transition:opacity 0.4s; border-radius:var(--radius-lg);
}
.value-card:hover { border-color:rgba(201,168,76,0.3); transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,0.4); }
.value-card:hover::after { opacity:1; }

/* Large decorative number (01, 02, 03) in the background of each card */
.value-number {
  font-family:'Cormorant Garamond',serif;
  font-size:3.5rem; font-weight:300; color:rgba(201,168,76,0.15); /* very faint gold */
  line-height:1; margin-bottom:1rem; display:block;
}

.value-title {
  font-family:'Cormorant Garamond',serif;
  font-size:1.4rem; font-weight:600; margin-bottom:0.8rem; color:var(--text);
}

.value-desc { font-size:0.88rem; line-height:1.7; color:var(--text-dim); }

/* ============================================================
   PRODUCTS SECTION
   Two-column card grid.
   ============================================================ */
.products { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }

.products-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }

.product-card {
  border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:3rem; position:relative; overflow:hidden; transition:all 0.4s;
}

/* Active/live product card — slightly brighter background */
.product-card.active {
  background:var(--bg3);
  border-color:rgba(201,168,76,0.25);
}

/* "Coming soon" product card — dimmed */
.product-card.coming {
  background:var(--bg2);
  opacity:0.6;
}

.product-card:hover { transform:translateY(-4px); box-shadow:0 20px 60px rgba(0,0,0,0.4); }

/* Status badge (e.g. "In Development", "Future") */
.product-status {
  display:inline-flex; align-items:center; gap:0.4rem;
  font-size:0.65rem; letter-spacing:0.15em; text-transform:uppercase;
  padding:0.3rem 0.8rem; border-radius:100px; margin-bottom:2rem;
}

/* Green "live" badge with animated dot */
.product-status.live { background:rgba(76,175,80,0.1); border:1px solid rgba(76,175,80,0.2); color:#4CAF50; }
.product-status.live::before { content:''; width:5px;height:5px; background:#4CAF50; border-radius:50%; animation:pulse 2s infinite; }

/* Gold "coming soon" badge */
.product-status.soon { background:rgba(201,168,76,0.08); border:1px solid rgba(201,168,76,0.15); color:var(--gold-dim); }

/* Pulsing dot animation used on the live badge */
@keyframes pulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:0.4;transform:scale(0.7)} }

.product-name {
  font-family:'Cormorant Garamond',serif;
  font-size:2.2rem; font-weight:600; color:var(--text); margin-bottom:0.5rem;
}

.product-tagline { font-size:0.9rem; color:var(--gold); letter-spacing:0.05em; margin-bottom:1.2rem; }

.product-desc { font-size:0.88rem; line-height:1.7; color:var(--text-dim); margin-bottom:2rem; }

/* Tag pills (e.g. "Windows", "E2EE", "P2P") */
.product-tags { display:flex; flex-wrap:wrap; gap:0.5rem; }
.product-tag {
  font-size:0.65rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--text-dim); background:rgba(255,255,255,0.04);
  border:1px solid var(--border); padding:0.25rem 0.7rem; border-radius:100px;
}

/* "Visit CesaConn →" link — arrow slides right on hover */
.product-link {
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.8rem; color:var(--gold); text-decoration:none;
  letter-spacing:0.05em; margin-top:1.5rem; transition:gap 0.3s;
}
.product-link:hover { gap:0.8rem; }

/* ============================================================
   PHILOSOPHY SECTION
   Sticky left column with title; scrollable right column with items.
   ============================================================ */
.philosophy { background:var(--bg); }

.philosophy-layout {
  display:grid; grid-template-columns:1fr 2fr; gap:5rem; align-items:start;
}

/* The title/description column sticks to the top as the user scrolls the items */
.philosophy-sticky {
  position:sticky; top:8rem; /* accounts for the fixed nav height */
}

.philosophy-items { display:flex; flex-direction:column; gap:0; }

/* Each philosophy item — indents slightly on hover */
.philosophy-item {
  padding:2.5rem 0;
  border-bottom:1px solid var(--border);
  transition:all 0.3s;
}
.philosophy-item:first-child { border-top:1px solid var(--border); }
.philosophy-item:hover { padding-left:0.5rem; }

.philosophy-item-num {
  font-size:0.65rem; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--gold-dim); margin-bottom:0.8rem; display:block;
}

.philosophy-item-title {
  font-family:'Cormorant Garamond',serif;
  font-size:1.5rem; font-weight:600; margin-bottom:0.8rem; color:var(--text);
}

.philosophy-item-desc { font-size:0.88rem; line-height:1.7; color:var(--text-dim); }

/* ============================================================
   MANIFESTO SECTION
   Centered quote block.
   ============================================================ */
.manifesto {
  background:var(--bg2);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  text-align:center;
}

.manifesto-inner { max-width:700px; margin:0 auto; }

.manifesto-text {
  font-family:'Cormorant Garamond',serif;
  font-size:clamp(1.5rem,3vw,2.2rem);
  font-weight:300; line-height:1.6; color:var(--text);
  font-style:italic;
}
.manifesto-text em { color:var(--gold); font-style:normal; }
.manifesto-text strong { font-weight:600; font-style:normal; color:var(--text); }

.manifesto-sig {
  margin-top:2.5rem;
  font-size:0.75rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--text-dim);
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  border-top:1px solid var(--border);
  padding:3rem 4rem;
  display:flex; justify-content:space-between; align-items:center;
  background:var(--bg2);
}

.footer-logo { font-family:'Cormorant Garamond',serif; font-size:1.1rem; color:var(--gold); font-weight:600; }
.footer-sub { font-size:0.72rem; color:var(--text-dim); margin-top:0.2rem; }
.footer-sub a { color:var(--gold-dim); text-decoration:none; }

.footer-links { display:flex; gap:2rem; }
.footer-links a { font-size:0.72rem; color:var(--text-dim); text-decoration:none; letter-spacing:0.1em; text-transform:uppercase; transition:color 0.3s; }
.footer-links a:hover { color:var(--gold); }

/* ============================================================
   LANGUAGE SYSTEM
   Elements with data-lang="pl" are hidden by default (English is default).
   Adding class "pl" to <body> flips visibility — hides EN, shows PL.
   ============================================================ */
[data-lang="pl"] { display:none; }
body.pl [data-lang="en"] { display:none; }
body.pl [data-lang="pl"] { display:block; }

/* ============================================================
   HAMBURGER BUTTON
   Hidden on desktop, shown on mobile via the media query below.
   Three <span> elements act as the three bars.
   ============================================================ */
.nav-hamburger {
  display: none; /* hidden on desktop */
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}
/* Each bar */
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: all 0.3s;
}
/* When open: top bar rotates to form the top of an X */
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
/* Middle bar disappears */
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
/* Bottom bar rotates to form the bottom of an X */
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   MOBILE RESPONSIVE (max 900px)
   ============================================================ */
@media(max-width:900px) {
  /* Tighter nav padding on small screens */
  nav { padding:0.8rem 1.2rem; gap:1rem; }

  /* Nav links hidden by default on mobile */
  .nav-links { display:none; }

  /* When JS adds the "open" class, show the dropdown below the nav */
  .nav-links.open {
    display: flex;
    position: fixed;
    top: 5rem;              /* sits just below the nav bar */
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    background: rgba(6,6,5,0.97);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 0;
    z-index: 99;            /* below the nav (z-index 100) but above everything else */
    gap: 0;
  }
  .nav-links.open li { width: 100%; text-align: center; }
  .nav-links.open a { display: block; padding: 0.9rem 2rem; font-size: 0.9rem; }

  /* Re-apply language hiding inside the open menu.
     Needed because ".nav-links.open a { display: block }" has higher specificity
     than the global [data-lang] rules, so we override it here explicitly. */
  .nav-links.open a[data-lang="pl"] { display: none; }
  body.pl .nav-links.open a[data-lang="en"] { display: none; }
  body.pl .nav-links.open a[data-lang="pl"] { display: block; }

  /* Show the hamburger button */
  .nav-hamburger { display: flex; }

  /* Hide the CTA button — saves space, it's still accessible in the hero */
  .nav-cta { display: none !important; }

  /* Reduce section padding on small screens */
  section { padding:5rem 1.5rem; }

  /* Stack all multi-column layouts to single column */
  .mission-layout { grid-template-columns:1fr; gap:2rem; }
  .values-grid { grid-template-columns:1fr; }
  .value-card { padding: 1.8rem; }
  .products-grid { grid-template-columns:1fr; }
  .product-card { padding: 2rem; }
  .philosophy-layout { grid-template-columns:1fr; gap:2rem; }
  .philosophy-sticky { position:static; } /* no longer sticky — just flows normally */

  /* Stack footer links below the logo */
  footer { flex-direction:column; gap:1.5rem; text-align:center; padding:2rem 1.5rem; }

  /* Shrink blobs so they don't dominate the small screen */
  .blob-1 { width:280px; height:280px; top:-80px; left:-80px; }
  .blob-2 { width:240px; height:240px; bottom:-60px; right:-60px; }
  .blob-3 { display: none; } /* third blob removed entirely on mobile */
}