/* =====================================================================
   Mitmachkarte — Landing Page Styles
   Promotional Product Page for Participation Portal Mitmachkarte.
   Organized in Sections: Tokens, Base, Navigation, Hero, Trust, Sections,
   Features, Live-Demo, Roadmap, About, Contact, Footer, Responsive.
   INKEK Corporate Branding. 
   ===================================================================== */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');


/* =================================================================
   SECTION 1: Design Tokens for INKEK Corporate Branding.
   ================================================================= */

:root {
/* INKEK Color Palette */
--color-blue:   #08A9F9;
--color-yellow: #FDDB00;
--color-green:  #46B270;
--color-red:    #D9534F;
--color-yellow-ink: #8A7500;

/* Neutral Palette */
--color-white:      #ffffff;
--color-surface:    #F8F9FB;
--color-text:       #1A1A2E;
--color-text-muted: #575756;
--color-border:     #E0E5EB;

/* Typography Scale */
--font-display: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
--font-body:    'Inter', system-ui, -apple-system, sans-serif;
--font-xs:  0.75rem;   /* Badges */
--font-sm:  0.85rem;   /* Secondary Text, Eyebrows */
--font-base:1rem;      /* Body Text */
--font-md:  1.15rem;   /* Card Titles, Lead Text */
--font-lg:  1.3rem;    /* Contact Headings */
--font-xl:  1.5rem;    /* Small Section Titles */
--font-2xl: 2.4rem;    /* Section Titles */
--font-3xl: 3.2rem;    /* Hero Headline */

/* Spacing Scale */
--space-xs:  4px;
--space-sm:  8px;
--space-md:  16px;
--space-lg:  24px;
--space-xl:  32px;
--space-2xl: 48px;
--space-3xl: 64px;
--section-padding-y: 100px;

/* Border Radius Scale */
--radius-sm:   4px;
--radius-md:   8px;
--radius-lg:   12px;
--radius-xl:   20px;
--radius-pill: 999px;

/* Shadow Scale */
--shadow-sm: 0 1px 4px rgba(0, 55, 109, 0.06);
--shadow-md: 0 4px 20px rgba(0, 55, 109, 0.08);
--shadow-lg: 0 12px 40px rgba(0, 55, 109, 0.12);
--shadow-xl: 0 20px 60px rgba(0, 55, 109, 0.18);

/* Layout */
--max-width:  1140px;
--nav-height: 72px;

/* Transitions */
--transition-fast:   150ms ease;
--transition-normal: 250ms ease;
}


/* =================================================================
   SECTION 2: Reset and Base Styles
   ================================================================= */

*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}

html { scroll-behavior: smooth; }

body.landing-page {
font-family: var(--font-body);
font-size: var(--font-base);
color: var(--color-text);
background: var(--color-white);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}

a   { text-decoration: none; color: inherit; }
img { max-width: 100%; height: auto; }


/* =================================================================
   SECTION 3: Navigation
   ================================================================= */

.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--color-border);
transition: box-shadow var(--transition-normal);
}

.nav.scrolled { box-shadow: var(--shadow-md); }

.nav-inner {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 var(--space-lg);
height: var(--nav-height);
display: flex;
align-items: center;
justify-content: space-between;
}

.nav-brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-display);
font-weight: 800;
font-size: 1.3rem;
color: var(--color-blue);
}

.nav-brand i {
font-size: 1.5rem;
color: var(--color-blue);
}

.nav-links {
display: flex;
align-items: center;
gap: var(--space-xl);
list-style: none;
}

.nav-links a {
font-size: var(--font-sm);
font-weight: 500;
color: var(--color-text-muted);
transition: color var(--transition-fast);
}

.nav-links a:hover { color: var(--color-blue); }

.nav-cta {
background: var(--color-blue);
color: var(--color-white) !important;
padding: 10px var(--space-lg);
border-radius: var(--radius-md);
font-weight: 600;
transition: filter var(--transition-fast), transform var(--transition-fast);
}

.nav-cta:hover {
filter: brightness(0.92);
transform: translateY(-1px);
}

.nav-toggle {
display: none;
border: none;
background: none;
font-size: 1.5rem;
color: var(--color-blue);
cursor: pointer;
}


/* =================================================================
   SECTION 4: Hero
   ================================================================= */

.hero {
padding: 160px var(--space-lg) var(--section-padding-y);
background: linear-gradient(170deg, var(--color-white) 0%, rgba(8, 169, 249, 0.06) 100%);
position: relative;
overflow: hidden;
}

.hero-inner {
max-width: var(--max-width);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: center;
}

.hero h1 {
font-family: var(--font-display);
font-size: var(--font-3xl);
font-weight: 800;
line-height: 1.15;
color: var(--color-text);
margin-bottom: 20px;
letter-spacing: -0.02em;
}

.hero h1 span { color: var(--color-blue); }

.hero-subtitle {
font-size: var(--font-md);
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: 36px;
max-width: 520px;
}

.hero-actions {
display: flex;
gap: var(--space-md);
flex-wrap: wrap;
}

/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
padding: 14px 28px;
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: var(--font-sm);
font-weight: 700;
cursor: pointer;
border: none;
transition: all var(--transition-fast);
}

/* Larger Button Variant */
.btn-lg {
font-size: var(--font-base);
padding: 16px 36px;
}

.btn-primary {
background: var(--color-blue);
color: var(--color-white);
box-shadow: 0 4px 14px rgba(8, 169, 249, 0.30);
}

.btn-primary:hover {
filter: brightness(0.92);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(8, 169, 249, 0.40);
}

.btn-secondary {
background: var(--color-green);
color: var(--color-white);
box-shadow: 0 4px 14px rgba(70, 178, 112, 0.30);
}

.btn-secondary:hover {
filter: brightness(0.92);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(70, 178, 112, 0.40);
}

.btn-outline {
background: transparent;
color: var(--color-blue);
border: 2px solid var(--color-blue);
}

.btn-outline:hover {
background: var(--color-blue);
color: var(--color-white);
}

/* Rotating Device Mockups */

.hero-visual {
position: relative;
aspect-ratio: 4 / 3;
}

.hero-mockups {
position: absolute;
inset: 0;
}

.mockup {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
opacity: 0;
filter: blur(3px);

transition:
    opacity 1600ms ease,
    filter 1600ms ease;
}

.mockup.active {
opacity: 1;
filter: blur(0);
}

/* Fallback to single Mockup */
.hero-mockups:has(.mockup:only-child) .mockup {
opacity: 1;
filter: blur(0);
}


/* =================================================================
   SECTION 5: Trust Bar
   ================================================================= */

.trust {
padding: var(--space-2xl) var(--space-lg);
background: var(--color-white);
border-bottom: 1px solid var(--color-border);
}

.trust-inner {
max-width: var(--max-width);
margin: 0 auto;
text-align: center;
}

.trust-label {
font-size: var(--font-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--color-text-muted);
margin-bottom: var(--space-lg);
}

.trust-logos {
display: flex;
justify-content: center;
align-items: center;
gap: var(--space-2xl);
flex-wrap: wrap;
opacity: 0.6;
}

.trust-logos span {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
font-family: var(--font-display);
font-size: var(--font-md);
font-weight: 700;
color: var(--color-text-muted);
}


/* =================================================================
   SECTION 6: Section Base
   ================================================================= */

.section {
padding: var(--section-padding-y) var(--space-lg);
}

.section-alt { background: var(--color-surface); }

.section-inner {
max-width: var(--max-width);
margin: 0 auto;
}

.section-header {
text-align: center;
margin-bottom: var(--space-3xl);
}

.section-eyebrow {
font-family: var(--font-display);
font-size: var(--font-sm);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--color-blue);
margin-bottom: 12px;
}

.section-title {
font-family: var(--font-display);
font-size: var(--font-2xl);
font-weight: 800;
color: var(--color-text);
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: var(--space-md);
}

.section-subtitle {
font-size: var(--font-md);
color: var(--color-text-muted);
max-width: 600px;
margin: 0 auto;
line-height: 1.7;
}


/* =================================================================
   SECTION 7: Features Grid
   ================================================================= */

.features-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
}

.feature-card {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 36px 28px;
transition: box-shadow var(--transition-normal), transform var(--transition-normal);
}

.feature-card:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-4px);
}

.feature-icon {
width: 52px;
height: 52px;
border-radius: var(--radius-lg);
background: rgba(8, 169, 249, 0.08);
color: var(--color-blue);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
margin-bottom: 20px;
}

.feature-card h3 {
font-family: var(--font-display);
font-size: var(--font-md);
font-weight: 700;
margin-bottom: 10px;
color: var(--color-text);
}

.feature-card p {
font-size: var(--font-sm);
color: var(--color-text-muted);
line-height: 1.6;
}


/* =================================================================
   SECTION 8: Live Demo
   ================================================================= */

.demo-container {
max-width: 900px;
margin: 0 auto;
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-lg);
border: 1px solid var(--color-border);
aspect-ratio: 16 / 10;
background: var(--color-surface);
}

.demo-container iframe {
width: 100%;
height: 100%;
border: none;
}

.demo-actions {
text-align: center;
margin-top: var(--space-xl);
}


/* =================================================================
   SECTION 9: Roadmap
   ================================================================= */

.modules {
display: flex;
flex-direction: column;
gap: var(--space-lg);
}

.module-card {
display: grid;
grid-template-columns: 80px 1fr auto;
gap: var(--space-lg);
align-items: center;
background: var(--color-white);
border: 1px solid var(--color-border);
border-left: 4px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
transition: border-color var(--transition-normal), box-shadow var(--transition-normal);
}

.module-card:hover {
box-shadow: var(--shadow-md);
}

.module-icon {
width: 64px;
height: 64px;
border-radius: var(--radius-xl);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
background: rgba(87, 87, 86, 0.08);
color: var(--color-text-muted);
}

.module-content h3 {
font-family: var(--font-display);
font-size: var(--font-md);
font-weight: 700;
margin-bottom: 6px;
color: var(--color-text);
}

.module-content p {
font-size: var(--font-sm);
color: var(--color-text-muted);
line-height: 1.6;
}

.module-badge {
padding: 4px 14px;
border-radius: var(--radius-pill);
font-size: var(--font-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
flex-shrink: 0;
}

/* Status: available (green) */
.module-card.available { border-left-color: var(--color-green); }
.module-card.available .module-icon { background: rgba(70, 178, 112, 0.12); color: var(--color-green); }
.module-badge.available { background: rgba(70, 178, 112, 0.15); color: #2F7D54; }

/* Status: in progress (yellow — dark Amber Foreground for Legibility) */
.module-card.progress { border-left-color: var(--color-yellow); }
.module-card.progress .module-icon { background: rgba(253, 219, 0, 0.18); color: var(--color-yellow-ink); }
.module-badge.progress { background: rgba(253, 219, 0, 0.22); color: var(--color-yellow-ink); }

/* Status: planned (red) */
.module-card.planned { border-left-color: var(--color-red); }
.module-card.planned .module-icon { background: rgba(217, 83, 79, 0.12); color: var(--color-red); }
.module-badge.planned { background: rgba(217, 83, 79, 0.15); color: #B03A37; }


/* =================================================================
   SECTION 10: About INKEK
   ================================================================= */

.about {
display: flex;
gap: 60px;
align-items: center;
justify-content: center;
}

.about-text {
max-width: 900px;
}

.about-logo {
height: 56px;
width: auto;
margin-bottom: var(--space-lg);
}

.about-text h3 {
font-family: var(--font-display);
font-size: var(--font-xl);
font-weight: 800;
color: var(--color-text);
margin-bottom: var(--space-md);
}

.about-text p {
font-size: var(--font-base);
color: var(--color-text-muted);
line-height: 1.7;
margin-bottom: var(--space-md);
}


/* =================================================================
   SECTION 11: Contact
   ================================================================= */

.cta-section {
padding: var(--section-padding-y) var(--space-lg);
background: var(--color-blue);
color: var(--color-white);
text-align: center;
}

.cta-section .section-eyebrow { color: var(--color-yellow); }

.cta-section .section-title {
color: var(--color-white);
max-width: 700px;
margin: 0 auto var(--space-md);
}

.cta-section .section-subtitle {
color: rgba(255, 255, 255, 0.75);
margin-bottom: 40px;
}

.cta-section .btn-primary {
background: var(--color-white);
color: var(--color-blue);
box-shadow: none;
}

.cta-section .btn-primary:hover {
background: var(--color-yellow);
color: var(--color-text);
filter: none;
box-shadow: none;
transform: translateY(-2px);
}

/* Centered Contact Details */
.contact-list {
display: block;
width: fit-content;
max-width: 100%;
margin: 0 auto var(--space-xl);
text-align: left;
}

.contact-item {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: var(--space-md);
font-size: var(--font-base);
}

.contact-item i {
width: 20px;
text-align: center;
color: var(--color-white);
flex-shrink: 0;
}

.contact-item a:hover { text-decoration: underline; }


/* =================================================================
   SECTION 12: Footer
   ================================================================= */

.footer {
padding: var(--space-lg) var(--space-lg);
background: rgba(255, 255, 255, 0.95);
color: var(--color-text);
}

.footer-inner {
max-width: var(--max-width);
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-sm);
}

.footer-inner span a { color: inherit; }
.footer-inner span a:hover { color: var(--color-blue); }

.footer-links {
display: flex;
gap: var(--space-lg);
}

.footer-links a {
color: var(--color-text);
transition: color var(--transition-fast);
}

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


/* =================================================================
   SECTION 13: Responsive
   ================================================================= */

@media (max-width: 900px) {
.hero-inner    { grid-template-columns: 1fr; gap: 40px; }
.hero h1       { font-size: var(--font-2xl); }
.hero-visual   { aspect-ratio: 16 / 10; width: 100%; max-width: 480px; margin: 0 auto; }
.features-grid { grid-template-columns: 1fr; }
.module-card   { grid-template-columns: 56px 1fr; }
.module-badge  { display: none; }
.section-title { font-size: var(--font-xl); }
.nav-links     { display: none; }
.nav-toggle    { display: block; }
.footer-inner  { flex-direction: column; gap: var(--space-md); text-align: center; }
}

@media (max-width: 600px) {
.hero          { padding: 120px 16px 60px; }
.hero h1       { font-size: 2rem; }
.hero-subtitle { font-size: var(--font-base); }
.section       { padding: 60px 16px; }
.trust-logos   { gap: var(--space-lg); }
.demo-container { aspect-ratio: 2 / 3; }
}

/* Mobile Navigation */
@media (max-width: 900px) {
.nav-links.open {
display: flex;
flex-direction: column;
position: absolute;
top: var(--nav-height);
left: 0; right: 0;
background: var(--color-white);
padding: var(--space-lg);
gap: var(--space-md);
border-bottom: 1px solid var(--color-border);
box-shadow: var(--shadow-md);
}
}