/* ══════════════════════════════════════════════
   HOME.CSS — index.html only
   Hero text/CTA, gallery, contact form.

   NOTE: the projects/products card-grid component
   (.projects-section / .projects-grid / .project-card*)
   used to live here but is now shared with
   galym_robots/index.html, so it moved to core.css.
   Don't re-add it here — edit it in core.css instead.
══════════════════════════════════════════════ */

.hero {
    position: relative;
    width: 100%;
    height: auto;
    min-height: 0;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--bg);
    padding-top: var(--nav-h, 64px);
    padding-bottom: 0.5rem; /* tight handoff into Projects */
    flex-direction: column;
}

.hero-inner {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    width: 100%;
    padding: 0 6vw;
    box-sizing: border-box;
}

.hero-content {
    order: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem 0 0;
    z-index: 15;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    position: relative;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #f0c040;
    background: rgba(240, 192, 64, 0.15);
    border: 0.5px solid rgba(240, 192, 64, 0.4);
    padding: 0.4rem 1rem;
    border-radius: 100px;
    margin-bottom: 1rem;
}

.hero-title {
    font-family: var(--font-display);
    font-size: clamp(28px, 8.5vw, 40px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -1px;
    margin-bottom: 0.85rem;
    text-shadow: var(--hero-text-shadow);
    color: var(--text);
    max-width: 14ch;
}

.hero-title .accent {
    color: var(--accent);
    display: inline-block;
    transition: opacity 0.4s ease-in-out;
}

.hero-tagline {
    font-size: 14px;
    color: var(--muted);
    letter-spacing: 0.01em;
    line-height: 1.6;
    max-width: 42ch;
    margin-bottom: 1.3rem;
    text-shadow: var(--hero-text-shadow);
}

/* .btn-hero's own look now lives in core.css (shared by home, about,
   and the robots hub). This page only needs to hide the hero's copy
   of it on mobile, then bring it back at tablet+. */
.hero .btn-hero {
    display: none;
}

.gallery-section {
    padding: 1.75rem 0 2.5rem; /* tighter after Projects */
    overflow: hidden;
}

.dot {
    width: 5px;
    height: 5px;
}

.dot.active {
    width: 20px;
}

@media (min-width: 768px) {

.hero {
        align-items: stretch;
        height: auto;
        min-height: min(100vh, 720px);
        padding-top: var(--nav-h, 112px);
        padding-bottom: 1rem;
    }

.hero-inner {
        display: grid;
        grid-template-columns: minmax(280px, 420px) 1fr;
        align-items: center;
        align-content: center;
        gap: 2rem;
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0.5rem 6vw 0;
    }

.hero-content {
        position: static;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        max-width: 420px;
        padding: 0;
        z-index: 15;
    }

.hero-title {
        font-size: clamp(36px, 4.4vw, 58px);
        letter-spacing: -2px;
        max-width: 11ch;
    }

.hero-tagline {
        font-size: 14px;
        max-width: 420px;
    }

.hero .btn-hero {
        display: inline-flex !important;
    }

.gallery-section {
        padding: 1.75rem 0 2.75rem;
    }
}

@media (min-width: 1024px) {

.hero {
        align-items: stretch;
        height: auto;
        min-height: min(100vh, 780px);
        padding-top: var(--nav-h, 112px);
        padding-bottom: 1.25rem;
    }

.hero-inner {
        display: grid;
        grid-template-columns: minmax(340px, 460px) 1fr;
        align-items: center;
        align-content: center;
        gap: 2.5rem;
        height: auto;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0.75rem clamp(24px, 4vw, 72px) 0;
    }

.hero-content {
        position: static;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
        max-width: 460px;
        padding: 0;
        z-index: 15;
    }

.hero-title {
        font-size: clamp(44px, 4.2vw, 72px);
        letter-spacing: -3px;
        max-width: 11ch;
    }

.hero-tagline {
        font-size: 15px;
        max-width: 480px;
    }

.gallery-section {
        padding: 1.75rem 0 2.75rem;
    }
}

@media (orientation: landscape) and (max-height: 500px) {
.hero {
        height: auto;
        min-height: 0;
        padding-top: calc(var(--nav-h, 64px) + 0.5rem);
        padding-bottom: 0.75rem;
    }

.hero-inner {
        display: flex;
        flex-direction: column;
        gap: 1.1rem;
        height: auto;
        padding: 0 6vw;
    }

.hero-content {
        position: static;
        max-width: none;
        padding: 0.25rem 0 0;
    }

.hero-title {
        font-size: clamp(24px, 5.5vw, 34px);
        max-width: 22ch;
    }

.hero-tagline {
        max-width: 60ch;
    }
}

.home-quote {
  border-top: 1px solid var(--border);
  padding: 0.7rem 0 0;
  margin: 1.1rem auto 0;
  max-width: 34rem;
  font-style: italic;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
}

.home-quote p { margin: 0; }

/* Moved from core.css — home-only, robot.html doesn't use these
   (it renders the WebGL canvas via robot_style.css instead of a static img). */
.hero-visual-img-link {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: block;
}

.hero-visual-img {
    position: absolute;
    inset: 0;
    z-index: 5;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    /* Tighter padding so the new robot.png fills the box better */
    padding: 0.75rem 0.75rem 2.6rem;
    box-sizing: border-box;
    animation: heroImgFloat 5s ease-in-out infinite;
}

@keyframes heroImgFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.hero-visual-tag {
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.9rem;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: var(--hero-ctrl-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--hero-ctrl-border);
    color: var(--muted);
    padding: 0.6rem 0.9rem;
    border-radius: 4px;
    font-size: 11.5px;
    font-weight: 500;
    font-family: var(--font-body);
    text-decoration: none;
    transition: all 0.2s;
}

.hero-visual-tag:hover,
.hero-visual-tag:focus-visible {
    border-color: var(--accent);
    color: var(--accent2);
}

.hero-visual-tag .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4caf7d;
    animation: heroDotPulse 1.8s ease-out infinite;
}

@keyframes heroDotPulse {
    0%   { box-shadow: 0 0 0 0 rgba(76, 175, 125, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(76, 175, 125, 0); }
    100% { box-shadow: 0 0 0 0 rgba(76, 175, 125, 0); }
}

/* ── Contact form (index.html) ──
   Moved from about.css — this styles the full contact form on the
   home page, not about.html. The former two-column layout (form +
   "direct contact" aside) is gone now that the aside was removed
   (its info now lives only in the shared footer), so this is a
   single mobile-first column with a max-width added back in at
   desktop rather than a grid split. */
.contact-section {
    background: var(--bg2);
    padding-top: 2.5rem;
    padding-bottom: 3rem;
}

.contact-header { margin-bottom: 1.75rem; max-width: 100%; }

@media (min-width: 768px) {
.contact-header {
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

.contact-header .sec-eyebrow {
        justify-content: center;
    }

.contact-header .contact-lead {
        margin-left: auto;
        margin-right: auto;
    }
}

.contact-lead {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.6;
    margin-top: 0.75rem;
    max-width: 40rem;
}

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

@media (min-width: 768px) {
.contact-layout {
        max-width: 640px;
        margin: 0 auto;
    }
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: var(--bg);
    border: 0.5px solid var(--border);
    border-radius: 8px;
    padding: 1.35rem 1.25rem;
}

@media (min-width: 768px) {
.contact-form {
        padding: 1.75rem 1.75rem;
        box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
    }
}

.contact-field { display: flex; flex-direction: column; gap: 0.35rem; }

.contact-field label { font-size: 12px; font-weight: 600; color: var(--text); }

.contact-field .optional { font-weight: 400; color: var(--muted); }

.contact-field input,
.contact-field textarea {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text);
    background: var(--bg2);
    border: 0.5px solid var(--border);
    border-radius: 6px;
    padding: 0.7rem 0.85rem;
    outline: none;
    width: 100%;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-field input:focus,
.contact-field textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--glow);
}

.contact-field textarea { resize: vertical; min-height: 120px; }

.contact-submit {
    align-self: flex-start;
    margin-top: 0.25rem;
    background: var(--accent);
    color: var(--accent-foreground);
    border: none;
    border-radius: 4px;
    padding: 0.75rem 1.5rem;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.25s, box-shadow 0.2s;
    /* Prevent Bootstrap blue focus/active ring */
    --bs-btn-focus-shadow-rgb: 45, 106, 79;
}

.contact-submit:hover {
    background: var(--accent2);
}

.contact-submit:focus,
.contact-submit:focus-visible,
.contact-submit:active {
    background: var(--accent2);
    color: var(--accent-foreground);
    border: none;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(45, 106, 79, 0.35);
}

.contact-form-note { font-size: 13px; color: var(--accent2); margin: 0.25rem 0 0; transition: color 0.2s; }

.contact-form-note--error { color: #e0555a; }