/* TYRON.sk - Custom CSS (migrated from Tailwind/React) */

:root {
    --background: 270 60% 3%;
    --foreground: 270 10% 92%;
    --card: 270 40% 6%;
    --card-foreground: 270 10% 92%;
    --primary: 275 93% 78%;
    --primary-foreground: 270 60% 8%;
    --secondary: 270 30% 12%;
    --muted: 270 20% 14%;
    --muted-foreground: 270 10% 60%;
    --accent: 275 93% 78%;
    --border: 270 20% 15%;
    --input: 270 20% 15%;
    --ring: 275 93% 78%;
    --radius: 0.5rem;
    --tyron-glow: 275 93% 78%;
    --tyron-deep: 270 60% 3%;
    --tyron-surface: 270 40% 8%;
}

* { box-sizing: border-box; }
*, *::before, *::after { border-color: hsl(var(--border)); }

html, body {
    margin: 0; padding: 0;
    background: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Space Grotesk', sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    font-size: 16px;
    line-height: 1.6;
}

h1, h2, h3, h4, h5 { font-family: 'Syne', sans-serif; font-weight: 400; line-height: 1.1; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
a { color: hsl(var(--primary)); text-decoration: none; transition: opacity .2s; }
a:hover { opacity: .8; }
img { max-width: 100%; display: block; }

::selection { background: hsl(275 93% 78% / 0.3); color: hsl(270 10% 92%); }

.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
@media (min-width: 1400px) { .container { max-width: 1400px; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.5rem; border-radius: var(--radius); font-weight: 500; transition: all .2s; cursor: pointer; border: 1px solid transparent; font-family: inherit; font-size: 1rem; }
.btn-primary { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); }
.btn-primary:hover { box-shadow: 0 0 30px hsl(var(--primary) / .4); transform: translateY(-1px); opacity: 1; }
.btn-outline { background: transparent; color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.btn-outline:hover { background: hsl(var(--secondary)); border-color: hsl(var(--primary)); color: hsl(var(--primary)); }
.btn-ghost { background: transparent; color: hsl(var(--foreground)); padding: .5rem 1rem; }
.btn-ghost:hover { color: hsl(var(--primary)); }

/* Forms — TYRON style: rounded-xl bg-card, label uppercase tracking-widest */
.form-control, input.form-control, textarea.form-control {
    width: 100%; padding: .85rem 1.25rem;
    background: hsl(var(--card));
    border: 1px solid hsl(var(--border) / .4); border-radius: .75rem;
    color: hsl(var(--foreground)); font-family: inherit; font-size: .875rem;
    transition: border-color .2s, box-shadow .2s;
}
.form-control:focus { outline: none; border-color: hsl(var(--primary) / .4); box-shadow: 0 0 0 1px hsl(var(--primary) / .4); }
.form-control::placeholder { color: hsl(var(--muted-foreground) / .4); }
.form-label {
    display: block; margin-bottom: .5rem; font-size: .75rem;
    color: hsl(var(--muted-foreground));
    letter-spacing: 0.15em; text-transform: uppercase;
    font-family: 'Space Grotesk', sans-serif;
}
textarea.form-control { resize: none; min-height: 130px; }

/* Pill buttons */
.btn-pill { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-size: .875rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 1rem 2.5rem; border-radius: 999px; transition: all .5s; cursor: pointer; font-family: 'Space Grotesk', sans-serif; }
.btn-pill-primary { background: transparent; border: 1px solid hsl(var(--primary) / .5); color: hsl(var(--primary)); box-shadow: 0 0 20px hsl(var(--primary) / .15); }
.btn-pill-primary:hover, .btn-pill-primary:focus { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 0 40px hsl(var(--primary) / .2), 0 0 80px hsl(var(--primary) / .05); opacity: 1; }
.btn-pill-primary:disabled { opacity: .5; pointer-events: none; }
.btn-pill-primary.is-full { width: 100%; }
.btn-pill-ghost { background: transparent; border: 1px solid hsl(var(--border) / .4); color: hsl(var(--muted-foreground)); padding: .8rem 1.75rem; font-size: .8125rem; }
.btn-pill-ghost:hover, .btn-pill-ghost:focus { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .5); opacity: 1; }
.btn-pill-sm { padding: .75rem 2rem; font-size: .8125rem; }

/* Utility classes */
.text-gradient { background: linear-gradient(135deg, hsl(275 93% 78%), hsl(280 80% 65%), hsl(260 70% 60%)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; }
.glow-sm { box-shadow: 0 0 20px hsl(275 93% 78% / 0.15); }
.glow-md { box-shadow: 0 0 40px hsl(275 93% 78% / 0.2), 0 0 80px hsl(275 93% 78% / 0.05); }
.glow-text { text-shadow: 0 0 40px hsl(275 93% 78% / 0.4); }
.text-muted { color: hsl(var(--muted-foreground)); }
.text-primary { color: hsl(var(--primary)); }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; letter-spacing: 0.2em; font-size: .75rem; }

/* Site wrapper + watermark */
.site-wrap { position: relative; min-height: 100vh; background: hsl(var(--background)); overflow-x: hidden; }
.site-watermark { position: absolute; top: 60vh; right: -8%; pointer-events: none; z-index: 0; transform: rotate(12deg); }
.site-watermark img { width: 65vw; max-width: 800px; opacity: 0.025; user-select: none; }
@media (min-width: 768px) { .site-watermark img { width: 45vw; } }
.site-content { position: relative; z-index: 1; }

/* Hero */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; padding: 0 1.5rem; overflow: hidden; }
@media (min-width: 768px) { .hero { padding: 0 4rem; } }
.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg svg, .hero-bg div { position: absolute; }
.hero-grid { top: 15%; right: 5%; width: 300px; height: 300px; opacity: .06; }
.hero-corner-tr { top: 12%; right: 8%; width: 60px; height: 60px; opacity: .3; }
.hero-corner-tl { top: 12%; right: calc(8% + 240px); width: 60px; height: 60px; opacity: .2; }
.hero-line-1, .hero-line-2, .hero-line-3 { right: 0; height: 1px; }
.hero-line-1 { top: 35%; width: 25vw; background: linear-gradient(to left, hsl(var(--primary) / .25), hsl(var(--primary) / .1), transparent); }
.hero-line-2 { top: 37%; width: 18vw; background: linear-gradient(to left, hsl(var(--primary) / .15), transparent); }
.hero-line-3 { top: 39%; width: 22vw; background: linear-gradient(to left, hsl(var(--primary) / .08), transparent); }
.hero-vline { top: 20%; right: 30%; width: 1px; height: 25vh; background: linear-gradient(to bottom, transparent, hsl(var(--primary) / .15), transparent); }
.hero-net { bottom: 25%; right: 12%; width: 200px; height: 150px; opacity: .2; }
.hero-blur { top: 33%; right: 10%; width: 400px; height: 400px; border-radius: 50%; background: hsl(var(--primary) / .04); filter: blur(120px); }
.hero-shape-1 { top: 60%; right: 22%; width: 12px; height: 12px; border: 1px solid hsl(var(--primary) / .25); transform: rotate(45deg); }
.hero-shape-2 { top: 25%; right: 18%; width: 8px; height: 8px; background: hsl(var(--primary) / .3); }
.hero-shape-3 { top: 70%; right: 8%; width: 8px; height: 8px; border: 1px solid hsl(var(--primary) / .2); }
.hero-brace { font-family: 'Space Grotesk', sans-serif; color: hsl(var(--primary) / .04); font-size: 6rem; user-select: none; line-height: 1; }
.hero-brace-1 { bottom: 35%; right: 40%; }
.hero-brace-2 { bottom: 20%; right: 35%; }

.hero-content { position: relative; z-index: 1; max-width: 80rem; width: 100%; margin: 0 auto; }
.hero-block { max-width: 48rem; }
.hero-tagline { font-size: .875rem; letter-spacing: 0.3em; text-transform: uppercase; color: hsl(var(--primary) / .7); margin-bottom: 2rem; }
.hero-title { font-family: 'Syne', sans-serif; font-size: 3rem; font-weight: 400; line-height: 0.95; margin-bottom: 2rem; }
@media (min-width: 640px) { .hero-title { font-size: 3.75rem; } }
@media (min-width: 768px) { .hero-title { font-size: 4.5rem; } }
@media (min-width: 1024px) { .hero-title { font-size: 6rem; } }
.hero-title .line { display: block; color: hsl(var(--foreground)); position: relative; }
.hero-title .line.gradient-line { position: relative; }
.hero-title .gradient-blur { position: absolute; inset: 0; filter: blur(20px); opacity: .4; user-select: none; pointer-events: none; }
.hero-desc { font-size: 1.25rem; color: hsl(var(--foreground) / .7); max-width: 36rem; font-weight: 300; line-height: 1.6; margin: 0; }
.hero-nav { margin-top: 3.5rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.hero-nav a, .hero-nav button { background: transparent; border: 0; padding: 0; cursor: pointer; font-family: inherit; font-size: .75rem; letter-spacing: 0.2em; text-transform: uppercase; color: hsl(var(--foreground) / .4); transition: color .3s; }
.hero-nav a:hover, .hero-nav button:hover { color: hsl(var(--primary)); }
.hero-nav-sep { width: 1px; height: 12px; background: hsl(var(--primary) / .2); }

/* Section */
.section { padding: 5rem 0; position: relative; }
.section-label { font-size: .75rem; letter-spacing: 0.3em; text-transform: uppercase; color: hsl(var(--primary)); margin-bottom: 1rem; }
.section-title { font-size: clamp(2rem, 5vw, 3.5rem); margin-bottom: 1rem; }
.section-desc { color: hsl(var(--muted-foreground)); font-size: 1.125rem; max-width: 700px; }
.section-header { text-align: center; margin-bottom: 4rem; }
.section-header.left { text-align: left; }
.section-header .section-desc { margin-left: auto; margin-right: auto; }

/* Projects section (homepage) — asymmetric 10-column grid with big background numbers */
.projects-section { position: relative; padding: 8rem 1.5rem; }
@media (min-width: 768px) { .projects-section { padding: 12rem 4rem; } }
.projects-deco-circle { position: absolute; top: 10%; right: 5%; width: 250px; height: 250px; border-radius: 50%; border: 1px solid hsl(var(--primary) / .04); pointer-events: none; }
.projects-deco-pulse { position: absolute; bottom: 20%; left: 3%; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--primary) / .2); animation: pulse-glow 4s ease-in-out infinite; pointer-events: none; }
.projects-inner { max-width: 80rem; margin: 0 auto; }
.projects-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 8rem; }
.projects-head-label { font-size: .75rem; letter-spacing: 0.4em; text-transform: uppercase; color: hsl(var(--primary)); margin-bottom: .75rem; }
.projects-head-title { font-family: 'Syne', sans-serif; font-size: 1.875rem; font-weight: 400; }
@media (min-width: 768px) { .projects-head-title { font-size: 3rem; } }
.projects-all-link { font-size: .875rem; color: hsl(var(--muted-foreground)); transition: color .3s; }
.projects-all-link:hover { color: hsl(var(--primary)); }
@media (max-width: 767px) { .projects-head { display: block; margin-bottom: 4rem; } .projects-all-link { display: none; } }

.projects-asym { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) {
    .projects-asym {
        grid-template-columns: repeat(10, 1fr);
        column-gap: 2rem;
        row-gap: 2rem;
        align-items: start;          /* každá karta má vlastnú výšku podľa obsahu */
        grid-auto-rows: min-content;
    }
    .pa-1 { grid-column: 1 / 5; grid-row: 1; }
    .pa-2 { grid-column: 6 / 10; grid-row: 1; margin-top: 6rem; }
    .pa-3 { grid-column: 2 / 6; grid-row: 2; margin-top: -2rem; }
    .pa-4 { grid-column: 7 / 11; grid-row: 2; margin-top: 4rem; }
}
.project-asym-card { position: relative; display: block; padding: 2rem; border: 1px solid hsl(var(--border) / .4); border-radius: 1rem; transition: all .5s; color: inherit; }
@media (min-width: 768px) { .project-asym-card { padding: 2.5rem; } }
.project-asym-card:hover { border-color: hsl(var(--primary) / .4); background: hsl(var(--card) / .5); box-shadow: 0 0 20px hsl(var(--primary) / .15); opacity: 1; }
.project-asym-num { position: absolute; top: -.75rem; left: -1.5rem; font-family: 'Syne', sans-serif; font-size: 3.5rem; font-weight: 400; color: hsl(var(--primary) / .12); user-select: none; transition: color .5s; line-height: 1; letter-spacing: -0.1em; pointer-events: none; font-feature-settings: 'lnum' 1, 'kern' 1; }
@media (min-width: 768px) { .project-asym-num { top: -1rem; left: -2rem; font-size: 4.9rem; } }
.project-asym-card:hover .project-asym-num { color: hsl(var(--primary) / .15); }
.project-asym-body { position: relative; z-index: 1; }
.project-asym-title { font-family: 'Syne', sans-serif; font-size: 1.25rem; font-weight: 400; margin-bottom: .75rem; transition: color .3s; }
@media (min-width: 768px) { .project-asym-title { font-size: 1.5rem; } }
.project-asym-card:hover .project-asym-title { color: hsl(var(--primary)); }
.project-asym-desc { font-size: .875rem; color: hsl(var(--muted-foreground)); line-height: 1.6; margin: 0; }
.project-asym-link { display: inline-block; margin-top: 1.25rem; font-size: .75rem; letter-spacing: 0.15em; text-transform: uppercase; color: hsl(var(--primary) / .6); transition: color .3s; }
.project-asym-card:hover .project-asym-link { color: hsl(var(--primary)); }
.project-asym-underline { position: absolute; bottom: 0; left: 2rem; right: 2rem; height: 1px; background: linear-gradient(to right, transparent, hsl(var(--primary) / .2), transparent); opacity: 0; transition: opacity .5s; }
.project-asym-card:hover .project-asym-underline { opacity: 1; }
.projects-mobile-link { display: none; }
@media (max-width: 767px) { .projects-mobile-link { display: block; margin-top: 3rem; text-align: center; font-size: .875rem; color: hsl(var(--muted-foreground)); } }

/* Projects list (/projekty) — 2-col text cards (matches React Projekty.tsx) */
.projekty-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .projekty-grid { grid-template-columns: 1fr 1fr; } }
.projekt-list-card { position: relative; display: block; padding: 2rem; border: 1px solid hsl(var(--border) / .4); border-radius: 1rem; transition: all .5s; color: inherit; overflow: hidden; }
@media (min-width: 768px) { .projekt-list-card { padding: 2.5rem; } }
.projekt-list-card:hover { border-color: hsl(var(--primary) / .4); background: hsl(var(--card) / .5); box-shadow: 0 0 20px hsl(var(--primary) / .15); opacity: 1; }
.projekt-list-subtitle { font-size: .75rem; letter-spacing: 0.2em; text-transform: uppercase; color: hsl(var(--primary) / .6); margin: 0 0 .75rem; }
.projekt-list-name { font-family: 'Syne', sans-serif; font-size: 1.25rem; font-weight: 400; margin: 0 0 .75rem; transition: color .3s; }
@media (min-width: 768px) { .projekt-list-name { font-size: 1.5rem; } }
.projekt-list-card:hover .projekt-list-name { color: hsl(var(--primary)); }
.projekt-list-desc { font-size: .875rem; color: hsl(var(--muted-foreground)); line-height: 1.6; margin: 0; }
.projekt-list-more { display: inline-block; margin-top: 1.25rem; font-size: .75rem; letter-spacing: 0.15em; text-transform: uppercase; color: hsl(var(--primary) / .6); transition: color .3s; }
.projekt-list-card:hover .projekt-list-more { color: hsl(var(--primary)); }
.projekt-list-underline { position: absolute; bottom: 0; left: 2rem; right: 2rem; height: 1px; background: linear-gradient(to right, transparent, hsl(var(--primary) / .2), transparent); opacity: 0; transition: opacity .5s; }
.projekt-list-card:hover .projekt-list-underline { opacity: 1; }

/* Project detail — background watermark image (top right corner) */
.project-bg-image { position: absolute; top: 0; right: 0; width: 80%; height: 100%; pointer-events: none; user-select: none; overflow: hidden; }
@media (min-width: 768px) { .project-bg-image { width: 60%; } }
.project-bg-image img { width: 100%; height: 100%; object-fit: cover; object-position: left top; opacity: 0.25; filter: grayscale(1) brightness(0.7) sepia(0.5) hue-rotate(220deg) saturate(1.5); }
.project-bg-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, hsl(var(--background)), hsl(var(--background) / .8), transparent); }
.project-bg-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, hsl(var(--background)), transparent, hsl(var(--background) / .5)); z-index: 1; }
.project-bg-blur { position: absolute; top: 0; right: 0; width: 300px; height: 300px; border-radius: 50%; background: hsl(var(--primary) / .03); filter: blur(100px); pointer-events: none; }

/* Projects list (sub-page) — keeps the simpler card grid for /projekty (legacy, unused now) */
.projects-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; }
.project-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 2); overflow: hidden; transition: transform .3s, border-color .3s, box-shadow .3s; display: block; color: inherit; }
.project-card:hover { transform: translateY(-4px); border-color: hsl(var(--primary) / .5); box-shadow: 0 20px 60px hsl(var(--primary) / .15); opacity: 1; }
.project-card-image { aspect-ratio: 16 / 10; overflow: hidden; background: hsl(var(--muted)); }
.project-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.project-card:hover .project-card-image img { transform: scale(1.05); }
.project-card-body { padding: 1.5rem; }
.project-card-title { font-size: 1.5rem; margin-bottom: .5rem; }
.project-card-subtitle { font-size: .875rem; color: hsl(var(--primary)); margin-bottom: .75rem; }
.project-card-desc { color: hsl(var(--muted-foreground)); font-size: .95rem; margin-bottom: 1rem; }
.project-card-link { color: hsl(var(--primary)); font-weight: 500; font-size: .875rem; }

/* Services neural network (homepage) */
.neural-section { position: relative; width: 100%; height: 100vh; background: #050208; overflow: hidden; }
.neural-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 10; pointer-events: none; padding: 3rem 1.5rem 0; }
@media (min-width: 768px) { .neural-overlay { padding: 4rem 4rem 0; } }
.neural-overlay-inner { max-width: 80rem; margin: 0 auto; }
.neural-overlay-card { display: inline-block; border-radius: 1rem; background: hsl(var(--background) / .6); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 1rem 1.5rem; border: 1px solid hsl(var(--primary) / .1); }
@media (min-width: 768px) { .neural-overlay-card { padding: 1.25rem 2rem; } }
.neural-overlay-label { font-size: .75rem; letter-spacing: 0.3em; text-transform: uppercase; color: hsl(var(--primary) / .7); margin-bottom: .5rem; }
.neural-overlay-title { font-family: 'Syne', sans-serif; font-size: 1.875rem; font-weight: 400; color: hsl(var(--foreground) / .9); margin: 0; line-height: 1.1; }
@media (min-width: 768px) { .neural-overlay-title { font-size: 3rem; } }
.neural-overlay-hint { font-size: .75rem; color: hsl(var(--muted-foreground) / .4); margin-top: .5rem; }

/* Closing section (homepage) */
.closing-section { position: relative; padding: 8rem 1.5rem; overflow: hidden; }
@media (min-width: 768px) { .closing-section { padding: 12rem 4rem; } }
.closing-bg-grad { position: absolute; bottom: 0; left: 0; right: 0; height: 400px; background: linear-gradient(to top, hsl(var(--primary) / .04), transparent); pointer-events: none; }
.closing-bg-circle { position: absolute; top: 33%; right: 25%; width: 300px; height: 300px; border-radius: 50%; border: 1px solid hsl(var(--primary) / .05); animation: float-slow 8s ease-in-out infinite; pointer-events: none; }
.closing-inner { max-width: 56rem; margin: 0 auto; text-align: center; position: relative; z-index: 1; }
.closing-h2 { font-family: 'Syne', sans-serif; font-size: 2.25rem; font-weight: 400; line-height: 1.1; margin-bottom: 2rem; }
@media (min-width: 640px) { .closing-h2 { font-size: 3rem; } }
@media (min-width: 768px) { .closing-h2 { font-size: 4.5rem; } }
.closing-h2 br { display: block; }
.closing-desc-2 { font-size: 1.125rem; color: hsl(var(--muted-foreground)); margin-bottom: 3rem; max-width: 32rem; margin-left: auto; margin-right: auto; }
.closing-actions { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; }
@media (min-width: 640px) { .closing-actions { flex-direction: row; } }
.closing-btn { display: inline-block; font-size: .875rem; letter-spacing: 0.15em; text-transform: uppercase; padding: 1rem 2.5rem; border-radius: 999px; transition: all .5s; }
.closing-btn-primary { border: 1px solid hsl(var(--primary) / .5); color: hsl(var(--primary)); box-shadow: 0 0 20px hsl(var(--primary) / .15); }
.closing-btn-primary:hover { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); box-shadow: 0 0 40px hsl(var(--primary) / .2), 0 0 80px hsl(var(--primary) / .05); opacity: 1; }
.closing-btn-secondary { color: hsl(var(--muted-foreground)); border: 1px solid hsl(var(--border) / .3); }
.closing-btn-secondary:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .4); opacity: 1; }
.closing-foot { margin-top: 8rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.closing-foot-select { appearance: none; background: hsl(var(--card)); border: 1px solid hsl(var(--border) / .4); color: hsl(var(--foreground) / .6); font-size: .75rem; padding: .5rem 2rem .5rem 1rem; border-radius: 999px; cursor: pointer; transition: border-color .2s; }
.closing-foot-select:hover { border-color: hsl(var(--primary) / .4); }
.closing-foot-select-wrap { position: relative; }
.closing-foot-select-wrap svg { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); width: 12px; height: 12px; color: hsl(var(--foreground) / .4); pointer-events: none; }
.closing-foot-copy { font-size: .75rem; color: hsl(var(--muted-foreground) / .4); }

/* Services grid */
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1rem; }
.service-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1.5rem; transition: all .3s; display: block; color: inherit; }
.service-card:hover { transform: translateY(-2px); border-color: hsl(var(--primary) / .5); box-shadow: 0 10px 30px hsl(var(--primary) / .1); opacity: 1; }
.service-card.is-primary { background: linear-gradient(135deg, hsl(var(--card)), hsl(var(--secondary))); border-color: hsl(var(--primary) / .3); }
.service-card-icon { width: 48px; height: 48px; border-radius: 12px; background: hsl(var(--primary) / .15); color: hsl(var(--primary)); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; font-size: 1.5rem; }
.service-card-title { font-size: 1.125rem; margin-bottom: .5rem; }
.service-card-desc { font-size: .9rem; color: hsl(var(--muted-foreground)); margin: 0; }

/* Blog grid */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; }
.blog-card { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 2); overflow: hidden; transition: all .3s; display: block; color: inherit; }
.blog-card:hover { transform: translateY(-4px); border-color: hsl(var(--primary) / .5); opacity: 1; box-shadow: 0 20px 60px hsl(var(--primary) / .12); }
.blog-card-image { aspect-ratio: 16 / 9; background: hsl(var(--muted)); overflow: hidden; }
.blog-card-image img { width: 100%; height: 100%; object-fit: cover; }
.blog-card-body { padding: 1.5rem; }
.blog-card-meta { font-size: .8rem; color: hsl(var(--muted-foreground)); margin-bottom: .75rem; display: flex; gap: 1rem; }
.blog-card-title { font-size: 1.5rem; margin-bottom: .75rem; }
.blog-card-excerpt { color: hsl(var(--muted-foreground)); margin-bottom: 1rem; }

/* Article body */
.article-body { max-width: 760px; margin: 0 auto; font-size: 1.05rem; line-height: 1.75; }
.article-body.service-body { max-width: none; margin: 0; }
.article-body h1, .article-body h2, .article-body h3 { margin-top: 2.5rem; }
.article-body h1 { font-size: 2.5rem; }
.article-body h2 { font-size: 1.875rem; }
.article-body h3 { font-size: 1.375rem; }
.article-body p { margin: 0 0 1.25rem; color: hsl(var(--foreground)); }
.article-body ul, .article-body ol { padding-left: 1.5rem; margin: 0 0 1.25rem; color: hsl(var(--foreground)); }
.article-body li { margin-bottom: .5rem; }
.article-body blockquote { border-left: 3px solid hsl(var(--primary)); padding: .5rem 1.5rem; margin: 1.5rem 0; background: hsl(var(--secondary) / .4); color: hsl(var(--muted-foreground)); font-style: italic; border-radius: 0 var(--radius) var(--radius) 0; }
.article-body code { background: hsl(var(--secondary)); padding: 2px 6px; border-radius: 3px; font-size: .9em; color: hsl(var(--primary)); }
.article-body pre { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); padding: 1rem; border-radius: var(--radius); overflow-x: auto; }
.article-body pre code { background: transparent; padding: 0; color: hsl(var(--foreground)); }
.article-body a { text-decoration: underline; }
.article-body img { border-radius: var(--radius); margin: 1.5rem 0; }
.cookie-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: .875rem; }
.cookie-table th, .cookie-table td { border: 1px solid hsl(var(--border) / .4); padding: .65rem .85rem; text-align: left; vertical-align: top; }
.cookie-table th { background: hsl(var(--card) / .6); color: hsl(var(--primary) / .8); font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; }
.cookie-table tbody tr:hover { background: hsl(var(--card) / .3); }
.article-hero { padding: 6rem 0 3rem; }
.article-hero-meta { color: hsl(var(--muted-foreground)); font-size: .875rem; margin-bottom: 1rem; }
.article-hero-title { font-size: clamp(2rem, 6vw, 4rem); font-weight: 400; margin-bottom: 1rem; max-width: 800px; }
.article-hero-image { aspect-ratio: 16 / 9; border-radius: calc(var(--radius) * 2); overflow: hidden; max-width: 1000px; margin: 2rem auto 0; }
.article-hero-image img { width: 100%; height: 100%; object-fit: cover; }

/* Tags */
.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.tag { display: inline-block; padding: .25rem .75rem; font-size: .75rem; background: hsl(var(--secondary)); color: hsl(var(--muted-foreground)); border-radius: 999px; border: 1px solid hsl(var(--border)); }

/* Stats (legacy + TYRON) */
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; margin: 2rem 0; }
.stat { background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 1.25rem; text-align: center; }
.stat-value { font-family: 'Syne', sans-serif; font-size: 2rem; font-weight: 700; color: hsl(var(--primary)); display: block; }
.stat-label { font-size: .8rem; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: .1em; margin-top: .25rem; }

.stats-grid-tyron { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin: 0 0 6rem; }
@media (min-width: 768px) { .stats-grid-tyron { grid-template-columns: repeat(4, 1fr); gap: 3rem; } }
.stat-tyron { text-align: center; }
@media (min-width: 768px) { .stat-tyron { text-align: left; } }
.stat-tyron-value { font-family: 'Syne', sans-serif; font-size: 1.875rem; font-weight: 400; margin: 0 0 .5rem; line-height: 1; }
@media (min-width: 768px) { .stat-tyron-value { font-size: 2.25rem; } }
.stat-tyron-label { font-size: .875rem; color: hsl(var(--muted-foreground)); margin: 0; }

/* Project detail – section labels */
.section-mini-label { font-size: .75rem; letter-spacing: 0.3em; text-transform: uppercase; color: hsl(var(--primary) / .7); margin: 0 0 2.5rem; font-family: 'Space Grotesk', sans-serif; }

/* Feature cards (6 with icon + bullet list) */
.features-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .features-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .features-grid { grid-template-columns: 1fr 1fr 1fr; } }
.feature-card { background: transparent; border: 1px solid hsl(var(--border) / .4); border-radius: 1rem; padding: 1.75rem; transition: all .5s; }
.feature-card:hover { border-color: hsl(var(--primary) / .3); background: hsl(var(--card) / .5); }
.feature-card-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.feature-card-icon { width: 2.25rem; height: 2.25rem; border-radius: .5rem; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); display: flex; align-items: center; justify-content: center; transition: background .3s; }
.feature-card:hover .feature-card-icon { background: hsl(var(--primary) / .2); }
.feature-card-title { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 400; margin: 0; transition: color .3s; }
.feature-card:hover .feature-card-title { color: hsl(var(--primary)); }
.feature-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .65rem; }
.feature-card-list li { display: flex; align-items: flex-start; gap: .65rem; font-size: .875rem; color: hsl(var(--foreground) / .6); line-height: 1.45; }
.feature-bullet-dot { width: 4px; height: 4px; border-radius: 50%; background: hsl(var(--primary) / .3); margin-top: .55rem; flex-shrink: 0; }

/* Two column cards (problems for owners / guests) */
.two-col-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
@media (min-width: 768px) { .two-col-grid { grid-template-columns: 1fr 1fr; } }
.two-col-card { border: 1px solid hsl(var(--border) / .4); border-radius: 1rem; padding: 2rem; transition: border-color .5s; }
.two-col-card:hover { border-color: hsl(var(--primary) / .3); }
.two-col-head { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
.two-col-icon { width: 2.5rem; height: 2.5rem; border-radius: .75rem; background: hsl(var(--primary) / .1); color: hsl(var(--primary)); display: flex; align-items: center; justify-content: center; }
.two-col-title { font-family: 'Syne', sans-serif; font-size: 1.125rem; font-weight: 400; margin: 0; }
.two-col-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.two-col-list li { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; color: hsl(var(--foreground) / .7); line-height: 1.5; }
.two-col-dot { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--primary) / .4); margin-top: .55rem; flex-shrink: 0; }

/* Tech stack — large bordered card with grid + sub-sections */
.tech-stack-card { border: 1px solid hsl(var(--border) / .4); border-radius: 1rem; padding: 2rem; }
@media (min-width: 768px) { .tech-stack-card { padding: 2.5rem; } }
.tech-stack-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .tech-stack-grid { grid-template-columns: repeat(4, 1fr); } }
.tech-stack-label { font-size: .75rem; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--primary) / .5); margin: 0 0 .35rem; }
.tech-stack-value { font-size: .875rem; color: hsl(var(--foreground) / .8); font-weight: 500; margin: 0; }

/* USPs — numbered list (2 cols) */
.usps-grid { display: grid; grid-template-columns: 1fr; gap: 0; column-gap: 3rem; }
@media (min-width: 768px) { .usps-grid { grid-template-columns: 1fr 1fr; } }
.usp-row { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid hsl(var(--border) / .3); }
.usp-num { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 400; color: hsl(var(--primary) / .2); user-select: none; line-height: 1; margin-top: .15rem; }
.usp-text { font-size: .875rem; color: hsl(var(--foreground) / .7); line-height: 1.6; margin: 0; }

/* Audience — 4-col cards */
.audience-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 640px) { .audience-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 768px) { .audience-grid { grid-template-columns: repeat(4, 1fr); } }
.audience-card { border: 1px solid hsl(var(--border) / .4); border-radius: 1rem; padding: 1.5rem; transition: border-color .5s; }
.audience-card:hover { border-color: hsl(var(--primary) / .3); }
.audience-label { font-size: .75rem; letter-spacing: 0.1em; text-transform: uppercase; color: hsl(var(--primary) / .5); margin: 0 0 .5rem; }
.audience-value { font-size: .875rem; color: hsl(var(--foreground) / .8); font-weight: 500; margin: 0; }

/* Types — 3 centered cards with gradient label */
.types-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .types-grid { grid-template-columns: repeat(3, 1fr); } }
.types-card { border: 1px solid hsl(var(--border) / .4); border-radius: 1rem; padding: 2rem; text-align: center; transition: border-color .5s; }
.types-card:hover { border-color: hsl(var(--primary) / .3); }
.types-label { font-family: 'Syne', sans-serif; font-size: 1.25rem; font-weight: 400; margin: 0 0 .5rem; }
.types-desc { font-size: .875rem; color: hsl(var(--foreground) / .5); margin: 0; }

/* Regions cards (3-col centered) */
.regions-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .regions-grid { grid-template-columns: repeat(3, 1fr); } }
.regions-card { border: 1px solid hsl(var(--border) / .4); border-radius: 1rem; padding: 2rem; text-align: center; transition: border-color .5s; }
.regions-card:hover { border-color: hsl(var(--primary) / .3); }
.regions-region { font-family: 'Syne', sans-serif; font-size: 1.125rem; font-weight: 400; margin: 0 0 .25rem; }
.regions-domain { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: .875rem; color: hsl(var(--foreground) / .5); margin: 0 0 .75rem; }
.regions-meta { display: flex; justify-content: center; gap: 1rem; font-size: .75rem; color: hsl(var(--foreground) / .4); }

/* Suppliers cards (3-col with brand chips) */
.suppliers-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
@media (min-width: 768px) { .suppliers-grid { grid-template-columns: repeat(3, 1fr); } }
.suppliers-card { border: 1px solid hsl(var(--border) / .4); border-radius: 1rem; padding: 1.75rem; transition: border-color .5s; }
.suppliers-card:hover { border-color: hsl(var(--primary) / .3); }
.suppliers-cat { font-size: .75rem; letter-spacing: 0.15em; text-transform: uppercase; color: hsl(var(--primary) / .7); margin: 0 0 1rem; }
.suppliers-brands { display: flex; flex-wrap: wrap; gap: .5rem; }
.suppliers-brand { font-size: .8125rem; color: hsl(var(--foreground) / .8); border: 1px solid hsl(var(--border) / .5); border-radius: 999px; padding: .25rem .75rem; }

/* Service detail — practice project cards */
.service-projects-list { display: flex; flex-direction: column; gap: 1.5rem; }
.service-project-card { border: 1px solid hsl(var(--primary) / .1); border-radius: 1rem; padding: 1.5rem; background: hsl(var(--card) / .5); backdrop-filter: blur(4px); transition: border-color .3s; }
@media (min-width: 768px) { .service-project-card { padding: 2rem; } }
.service-project-card:hover { border-color: hsl(var(--primary) / .25); }
.service-project-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.service-project-name { font-family: 'Syne', sans-serif; font-size: 1.125rem; font-weight: 400; color: hsl(var(--foreground)); margin: 0; }
.service-project-link { font-size: .75rem; color: hsl(var(--primary)); white-space: nowrap; }
.service-project-link:hover { text-decoration: underline; }
.service-project-desc { font-size: .875rem; color: hsl(var(--muted-foreground)); line-height: 1.6; margin: 0; }
.service-practice-title { font-family: 'Syne', sans-serif; font-size: 1.5rem; font-weight: 400; margin: 0 0 1.5rem; color: hsl(var(--foreground)); }
@media (min-width: 768px) { .service-practice-title { font-size: 1.875rem; } }
.service-cta { text-align: center; padding: 4rem 0 2rem; margin-top: 3rem; }
.service-cta p { color: hsl(var(--muted-foreground)); margin-bottom: 1.5rem; }

/* Project tags row */
.project-tags { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2.5rem; }
.project-tag { font-size: .75rem; color: hsl(var(--primary) / .8); border: 1px solid hsl(var(--primary) / .2); border-radius: 999px; padding: .375rem 1rem; }

/* Project detail content sections wrapper */
.project-sections { display: flex; flex-direction: column; gap: 6rem; }
@media (min-width: 768px) { .project-sections { gap: 8rem; } }

/* Closing CTA */
.closing { padding: 8rem 0; text-align: center; position: relative; overflow: hidden; }
.closing::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 600px; height: 600px; background: radial-gradient(circle, hsl(var(--primary) / 0.15), transparent 70%); pointer-events: none; }
.closing-title { font-size: clamp(2.5rem, 7vw, 5rem); position: relative; z-index: 1; }
.closing-desc { color: hsl(var(--muted-foreground)); font-size: 1.125rem; max-width: 500px; margin: 1.5rem auto 2.5rem; position: relative; z-index: 1; }
.closing-cta { position: relative; z-index: 1; }

/* Footer */
.site-footer { position: relative; z-index: 2; padding: 3rem 1.5rem 2rem; border-top: 1px solid hsl(var(--border) / .5); background: hsl(var(--background)); }
@media (min-width: 768px) { .site-footer { padding: 3rem 4rem 2rem; } }
.site-footer-inner { max-width: 80rem; margin: 0 auto; }
.footer-grid { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 2rem; }
.footer-brand { display: flex; align-items: center; gap: .75rem; }
.footer-brand img { height: 36px; width: auto; opacity: .9; }
.footer-meta { font-size: .8rem; color: hsl(var(--muted-foreground)); display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.footer-meta a { color: hsl(var(--muted-foreground)); transition: color .3s; }
.footer-meta a:hover { color: hsl(var(--primary)); opacity: 1; }
.footer-link-button { background: transparent; border: 0; cursor: pointer; color: hsl(var(--muted-foreground)); font-family: inherit; font-size: inherit; padding: 0; transition: color .3s; }
.footer-link-button:hover { color: hsl(var(--primary)); }
.footer-lang { display: flex; align-items: center; gap: .5rem; font-size: .75rem; }
.footer-lang a, .footer-lang-active { padding: .35rem .75rem; border-radius: 999px; border: 1px solid hsl(var(--border) / .4); color: hsl(var(--muted-foreground)); letter-spacing: .15em; transition: all .3s; }
.footer-lang a:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .4); opacity: 1; }
.footer-lang-active { background: hsl(var(--primary) / .12); color: hsl(var(--primary)); border-color: hsl(var(--primary) / .3); }
.footer-copyright { display: block; text-align: center; font-size: .75rem; color: hsl(var(--muted-foreground) / .5); margin-top: 2.5rem; }
.cookie-banner-desc a { color: hsl(var(--primary)); text-decoration: underline; }

.lang-switcher { display: flex; gap: .25rem; }
.lang-switcher a, .lang-switcher .current { padding: .25rem .75rem; font-size: .75rem; border-radius: var(--radius); border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
.lang-switcher .current { background: hsl(var(--primary) / .15); color: hsl(var(--primary)); border-color: hsl(var(--primary) / .3); }
.lang-switcher a:hover { color: hsl(var(--primary)); border-color: hsl(var(--primary) / .5); }

/* Cookie consent */
.cookie-banner { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; max-width: 720px; margin: 0 auto; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: calc(var(--radius) * 1.5); padding: 1.25rem; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); z-index: 9999; display: none; }
.cookie-banner.visible { display: block; }
.cookie-banner-title { font-weight: 600; margin-bottom: .5rem; }
.cookie-banner-desc { font-size: .875rem; color: hsl(var(--muted-foreground)); margin-bottom: 1rem; }
.cookie-banner-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Reveal animations */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1), transform .8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(.9); transition: opacity .8s cubic-bezier(0.16, 1, 0.3, 1), transform .8s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

@keyframes float-slow { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(3deg); } }
@keyframes pulse-glow { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } }
.animate-float-slow { animation: float-slow 8s ease-in-out infinite; }

/* Subpage hero — used by /kontakt, /blog, /projekty, /sluzby and detail pages */
.subpage-hero { position: relative; padding: 6rem 1.5rem 3rem; }
@media (min-width: 768px) { .subpage-hero { padding: 8rem 4rem 4rem; } }
.subpage-hero-inner { max-width: 64rem; margin: 0 auto; }
.subpage-back { font-size: .875rem; color: hsl(var(--muted-foreground)); margin-bottom: 2.5rem; display: inline-flex; align-items: center; gap: .5rem; transition: color .3s; }
.subpage-back:hover { color: hsl(var(--primary)); }
.subpage-label { font-size: .75rem; letter-spacing: 0.3em; text-transform: uppercase; color: hsl(var(--primary) / .7); margin-bottom: 1rem; display: block; }
.subpage-title { font-family: 'Syne', sans-serif; font-size: 2.25rem; font-weight: 400; line-height: 0.95; margin-bottom: 1.5rem; }
@media (min-width: 640px) { .subpage-title { font-size: 3rem; } }
@media (min-width: 768px) { .subpage-title { font-size: 4.5rem; } }
.subpage-desc { font-size: 1.125rem; color: hsl(var(--foreground) / .7); max-width: 42rem; line-height: 1.6; margin-bottom: 0; }
.subpage-content { padding: 2rem 1.5rem 6rem; }
@media (min-width: 768px) { .subpage-content { padding: 2rem 4rem 8rem; } }
.subpage-content-inner { max-width: 64rem; margin: 0 auto; }

/* Old back-link kept for compat */
.back-link { display: inline-flex; align-items: center; gap: .5rem; color: hsl(var(--muted-foreground)); margin-bottom: 2rem; padding-top: 6rem; }
.back-link:hover { color: hsl(var(--primary)); }

/* Page header (legacy) */
.page-header { padding: 8rem 0 3rem; text-align: left; }
.page-header.center { text-align: center; }
.page-header-label { font-size: .75rem; letter-spacing: 0.3em; text-transform: uppercase; color: hsl(var(--primary)); margin-bottom: 1rem; display: block; }
.page-header-title { font-size: clamp(2.5rem, 6vw, 4.5rem); margin-bottom: 1rem; }
.page-header-desc { color: hsl(var(--muted-foreground)); font-size: 1.125rem; max-width: 700px; }
.page-header.center .page-header-desc { margin: 0 auto; }

/* Contact layout — 1:1 with React Kontakt.tsx */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 4rem; max-width: 64rem; margin: 0 auto; align-items: start; }
@media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.contact-form-stack > * + * { margin-top: 1.5rem; }
.contact-info-stack > * + * { margin-top: 2rem; }
.contact-info-label { font-size: .75rem; color: hsl(var(--muted-foreground) / .6); letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: .5rem; font-family: 'Space Grotesk', sans-serif; }
.contact-info-text { color: hsl(var(--foreground)); line-height: 1.6; margin: 0; }
.contact-info-text a { color: hsl(var(--foreground)); }
.contact-info-text a:hover { color: hsl(var(--primary)); opacity: 1; }
.contact-info-divider { padding-top: 2rem; border-top: 1px solid hsl(var(--border) / .2); }
.contact-billing-list { font-size: .875rem; color: hsl(var(--foreground) / .7); line-height: 1.6; }
.contact-billing-list > * + * { margin-top: .25rem; }
.contact-billing-name { color: hsl(var(--foreground)); font-weight: 500; }
.contact-billing-foot { color: hsl(var(--muted-foreground) / .5); font-size: .75rem; padding-top: .5rem; }
.contact-success { border: 1px solid hsl(var(--primary) / .3); border-radius: 1rem; padding: 2.5rem; text-align: center; }
.contact-success-icon { font-size: 2.5rem; margin-bottom: 1rem; }
.contact-success-title { font-family: 'Syne', sans-serif; font-size: 1.25rem; font-weight: 400; margin-bottom: .5rem; }
.contact-success-desc { color: hsl(var(--muted-foreground)); font-size: .875rem; }

iframe.map-frame { width: 100%; aspect-ratio: 4 / 3; height: auto; border: 0; border-radius: 1rem; filter: grayscale(1) brightness(.75) contrast(1.25); }
.map-wrap { border: 1px solid hsl(var(--border) / .4); border-radius: 1rem; overflow: hidden; aspect-ratio: 4 / 3; }
.map-wrap iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) brightness(.75) contrast(1.25); }

/* Sluzby cards — 1:1 with React Sluzby.tsx */
.sluzby-section { padding: 2rem 0 4rem; }
.sluzby-section + .sluzby-section { margin-top: 0; }
.sluzby-cat-label { font-size: .75rem; letter-spacing: 0.2em; text-transform: uppercase; color: hsl(var(--primary) / .5); margin-bottom: 1.5rem; font-family: 'Space Grotesk', sans-serif; }
.sluzby-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 768px) { .sluzby-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } }
.sluzby-card { display: block; padding: 1.5rem; border: 1px solid hsl(var(--primary) / .1); border-radius: 1rem; transition: border-color .3s; color: inherit; }
.sluzby-card:hover { border-color: hsl(var(--primary) / .3); opacity: 1; }
.sluzby-card-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.sluzby-card-title { font-family: 'Syne', sans-serif; font-size: 1.125rem; font-weight: 400; color: hsl(var(--foreground)); margin: 0; }
.sluzby-card-arrow { font-size: .75rem; color: hsl(var(--primary)); flex-shrink: 0; }
.sluzby-card-desc { font-size: .875rem; color: hsl(var(--muted-foreground)); margin: .5rem 0 0; }

/* Blog list cards — 1:1 with React Blog.tsx */
.blog-list { display: grid; grid-template-columns: 1fr; gap: 2rem; }
@media (min-width: 768px) { .blog-list { grid-template-columns: 1fr 1fr; } }
.blog-list-card { position: relative; display: block; border: 1px solid hsl(var(--border) / .4); border-radius: 1rem; overflow: hidden; transition: all .5s; color: inherit; }
.blog-list-card:hover { border-color: hsl(var(--primary) / .4); background: hsl(var(--card) / .5); box-shadow: 0 0 20px hsl(var(--primary) / .15); opacity: 1; }
.blog-list-card-img { aspect-ratio: 16 / 9; overflow: hidden; }
.blog-list-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s; }
.blog-list-card:hover .blog-list-card-img img { transform: scale(1.05); }
.blog-list-card-body { padding: 2rem; }
@media (min-width: 768px) { .blog-list-card-body { padding: 2.5rem; } }
.blog-list-meta { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.blog-list-time { font-size: .75rem; color: hsl(var(--primary) / .6); }
.blog-list-dot { font-size: .75rem; color: hsl(var(--muted-foreground) / .4); }
.blog-list-read { font-size: .75rem; color: hsl(var(--muted-foreground) / .6); }
.blog-list-title { font-family: 'Syne', sans-serif; font-size: 1.25rem; font-weight: 400; margin-bottom: .75rem; transition: color .3s; }
@media (min-width: 768px) { .blog-list-title { font-size: 1.5rem; } }
.blog-list-card:hover .blog-list-title { color: hsl(var(--primary)); }
.blog-list-excerpt { font-size: .875rem; color: hsl(var(--muted-foreground)); line-height: 1.6; margin: 0; }
.blog-list-more { display: inline-block; margin-top: 1.25rem; font-size: .75rem; letter-spacing: 0.15em; text-transform: uppercase; color: hsl(var(--primary) / .6); transition: color .3s; }
.blog-list-card:hover .blog-list-more { color: hsl(var(--primary)); }
.blog-list-underline { position: absolute; bottom: 0; left: 2rem; right: 2rem; height: 1px; background: linear-gradient(to right, transparent, hsl(var(--primary) / .2), transparent); opacity: 0; transition: opacity .5s; }
.blog-list-card:hover .blog-list-underline { opacity: 1; }
.alert { padding: 1rem; border-radius: var(--radius); margin-top: 1rem; }
.alert-success { background: hsl(140 60% 30% / .2); border: 1px solid hsl(140 60% 50% / .3); color: hsl(140 60% 70%); }
.alert-danger { background: hsl(0 60% 30% / .2); border: 1px solid hsl(0 60% 50% / .3); color: hsl(0 60% 70%); }
.text-muted-sm { font-size: .85rem; color: hsl(var(--muted-foreground)); }

/* Skill nodes (replaces 3D neural network) */
.skill-cloud { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; max-width: 900px; margin: 0 auto; padding-top: 2rem; }
.skill-node { padding: .5rem 1rem; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--card)); font-size: .85rem; color: hsl(var(--muted-foreground)); transition: all .3s; }
.skill-node.is-primary { border-color: hsl(var(--primary) / .4); color: hsl(var(--primary)); background: hsl(var(--primary) / .1); font-weight: 500; }
.skill-node.is-secondary { color: hsl(var(--foreground)); border-color: hsl(var(--border)); }
.skill-node:hover { border-color: hsl(var(--primary)); color: hsl(var(--primary)); transform: translateY(-2px); }