:root {
   --bg: #1E1E1E;
   --accent: #C5FC7A;
   --text: rgba(255, 255, 255, .92);
   --muted: rgba(255, 255, 255, .65);
   --border: rgba(255, 255, 255, .10);
   --card-bg: rgba(255, 255, 255, .05);
   --radius: 16px;
}

html {
   scroll-behavior: smooth;
}

body {
   background-color: var(--bg);
   color: var(--text);
   font-family: 'Inter', BlinkMacSystemFont, -apple-system, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* Navbar */
.navbar.pluzy-navbar {
   background: rgba(30, 30, 30, 0.8);
   backdrop-filter: blur(12px);
   border-bottom: 1px solid var(--border);
}

.navbar-item img {
   max-height: 2.5rem;
}

.navbar-item,
.navbar-link {
   color: var(--text);
   font-weight: 500;
}

.navbar-item:hover {
   background: transparent !important;
   color: var(--accent) !important;
}

/* Typography & Colors */
.title,
.subtitle,
.label {
   color: var(--text);
}

.has-text-accent {
   color: var(--accent) !important;
}

.pluzy-hero-title {
   letter-spacing: -0.04em;
   line-height: 1.1;
   font-weight: 800;
}

/* Buttons */
.button.is-accent {
   background-color: var(--accent);
   color: #111;
   border: none;
   font-weight: 700;
   border-radius: 12px;
   transition: transform 0.2s ease;
}

.button.is-accent:hover {
   background-color: #d4ff96;
   transform: translateY(-2px);
}

.button.is-outline {
   background: transparent;
   border: 1px solid var(--border);
   color: var(--text);
   border-radius: 12px;
}

.button.is-outline:hover {
   border-color: var(--accent);
   color: var(--accent);
}

/* Cards */
.pluzy-card {
   background: var(--card-bg);
   border: 1px solid var(--border);
   border-radius: var(--radius);
   padding: 2rem;
   height: 100%;
   transition: border-color 0.3s ease;
}

.pluzy-card:hover {
   border-color: rgba(197, 252, 122, 0.3);
}

/* Mockup Section */
.mockup-container {
   position: relative;
   overflow: hidden;
   display: flex;
   align-items: center;
   justify-content: center;
}

.mockup-image {
   display: block;
   width: 100%;
   height: auto;
   transition: transform 0.3s ease;
}

.mockup-container:hover .mockup-image {
   transform: scale(1.02);
}

/* Footer */
.footer {
   background: transparent;
   border-top: 1px solid var(--border);
   padding: 4rem 1.5rem;
}

.footer a {
   color: var(--muted);
   margin: 0 0.75rem;
}

.footer a:hover {
   color: var(--accent);
}

/* Anchor offset */
.anchor {
   scroll-margin-top: 100px;
}