/* ========================================
   LOAFPICKLE WORLDWIDE — Home Styles
   "Brutal Precision" Overhaul
   ======================================== */

.home-page {
    padding-top: calc(var(--unit) * 12);
}

/* ---- HERO: THE MONOLITH (STRICT CENTER) ---- */
.hero-monolith {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: var(--border-subtle);
    position: relative;
    overflow: hidden;
}

/* Ambient glow positioned behind hero content */
.hero-monolith .ambient-glow {
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
}

.logo-frame-precision {
    width: 80px;
    height: 80px;
    margin: 0 auto calc(var(--unit) * 4);
    border: 1px solid var(--accent-brine);
    padding: var(--unit);
    background: rgba(212, 255, 0, 0.04);
    position: relative;
    animation: logo-breathe 4s ease-in-out infinite;
}

.logo-frame-precision::before {
    content: '';
    position: absolute;
    inset: -1px;
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--accent-brine), transparent 40%, transparent 60%, var(--accent-brine)) border-box;
    mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    animation: logo-rotate 8s linear infinite;
    opacity: 0.5;
}

@keyframes logo-breathe {
    0%, 100% { box-shadow: 0 0 20px rgba(212, 255, 0, 0.08); }
    50%      { box-shadow: 0 0 40px rgba(212, 255, 0, 0.15), 0 0 80px rgba(212, 255, 0, 0.05); }
}

@keyframes logo-rotate {
    0%   { background-position: 0% 0%; filter: hue-rotate(0deg); }
    100% { background-position: 200% 200%; filter: hue-rotate(0deg); }
}

.hero-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 1;
}

.hero-display {
    font-size: clamp(3.5rem, 10vw, 6.5rem);
    line-height: 0.85;
    letter-spacing: -0.06em;
    margin-bottom: calc(var(--unit) * 4);
}

.hero-lead {
    font-size: clamp(1.2rem, 1.8vw, 1.6rem);
    color: var(--text-dim);
    line-height: 1.5;
}

/* ---- PRODUCT SUITE: PRECISION GRID ---- */
.suite-section {
    background: var(--bg-layer-2);
}

.suite-grid-stable {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--unit) * 4);
}

.product-panel-precision {
    background: var(--bg-primary);
    border: var(--border-main);
    transition: all var(--trans-med);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

/* Brine accent stripe — left edge */
.product-panel-precision::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 0;
    background: var(--accent-brine);
    transition: height 500ms var(--ease-out);
    z-index: 1;
}

.product-panel-precision:hover::before {
    height: 100%;
}

/* Corner accent — top right */
.product-panel-precision::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 24px 24px 0;
    border-color: transparent rgba(212, 255, 0, 0.04) transparent transparent;
    transition: border-color var(--trans-med);
}

.product-panel-precision:hover::after {
    border-color: transparent rgba(212, 255, 0, 0.1) transparent transparent;
}

.product-panel-precision:nth-child(3) {
    grid-column: span 2;
    max-width: var(--reading-w);
    justify-self: center;
    width: 100%;
}

.panel-header {
    padding: calc(var(--unit) * 1.5) calc(var(--unit) * 2.5);
    border-bottom: var(--border-main);
    font-size: 0.65rem;
    color: var(--text-dim);
    background: rgba(212, 255, 0, 0.02);
    transition: background var(--trans-med);
}

.product-panel-precision:hover .panel-header {
    background: rgba(212, 255, 0, 0.05);
}

.panel-body {
    padding: calc(var(--unit) * 5);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-panel-precision:hover {
    border-color: var(--accent-brine);
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.7), 0 0 30px rgba(212, 255, 0, 0.04);
}

.panel-title {
    font-size: 2rem;
    margin-bottom: var(--unit);
}

.panel-desc {
    color: var(--text-dim);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: calc(var(--unit) * 3);
}

.panel-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--unit);
    margin-bottom: calc(var(--unit) * 4);
}

.panel-tags span {
    font-size: 0.6rem;
    padding: 2px 8px;
    border: 1px solid rgba(212, 255, 0, 0.1);
    color: var(--text-dim);
    transition: all 300ms var(--ease-out);
}

.product-panel-precision:hover .panel-tags span {
    border-color: rgba(212, 255, 0, 0.25);
    color: var(--accent-crust);
}

.panel-link {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-brine);
    text-decoration: none;
    transition: letter-spacing 300ms var(--ease-out), text-shadow 300ms ease;
    margin-top: auto;
}

.panel-link:hover {
    letter-spacing: 0.06em;
    text-shadow: 0 0 12px var(--glow-brine-sm);
}

/* ---- FOOTER (styles in global.css) ---- */

/* ---- RESPONSIVE ---- */
@media (max-width: 900px) {
    .suite-grid-stable { grid-template-columns: 1fr; }
    .product-panel-precision:nth-child(3) { grid-column: span 1; }
    .hero-monolith { min-height: 70vh; }
}