/* assets/css/05-sections.css */
/* Hero, features, showcase, install, footer specific styles */

.hero {
    min-height:     100vh;
    display:        flex;
    align-items:    center;
    padding-top:    var(--space-32);
    padding-bottom: var(--space-20);
    position:       relative;
    overflow:       hidden;
}

.hero__bg {
    position: absolute;
    inset:    0;
    z-index:  0;
    pointer-events: none;
}

.hero__grid {
    position:   absolute;
    inset:      0;
    background-image:
        linear-gradient(rgba(78,201,176,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(78,201,176,0.04) 1px, transparent 1px);
    background-size:   60px 60px;
    mask-image:        radial-gradient(ellipse 80% 60% at 50% 0%, black 40%, transparent 100%);
}

.hero__glow-a {
    position:   absolute;
    top:        -20%;
    left:       -10%;
    width:      70vw;
    height:     70vw;
    background: radial-gradient(circle, rgba(78,201,176,0.08) 0%, transparent 65%);
}
.hero__glow-b {
    position:   absolute;
    top:        10%;
    right:      -15%;
    width:      50vw;
    height:     50vw;
    background: radial-gradient(circle, rgba(86,156,214,0.07) 0%, transparent 65%);
}

.hero__content {
    position:  relative;
    z-index:   1;
    display:   grid;
    grid-template-columns: 1fr 1fr;
    gap:       var(--space-16);
    align-items: center;
}

.hero__kicker {
    font-family:    var(--font-mono);
    font-size:      0.7rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--teal);
    margin-bottom:  var(--space-4);
    display:        flex;
    align-items:    center;
    gap:            var(--space-3);
}
.hero__kicker::before {
    content:    '';
    width:      32px;
    height:     1px;
    background: var(--teal);
}

.hero__title {
    margin-bottom: var(--space-5);
}
.hero__title em {
    font-style:  normal;
    color:       var(--teal);
}

.hero__desc {
    font-size:     1.05rem;
    line-height:   1.75;
    color:         var(--fg-secondary);
    margin-bottom: var(--space-8);
    max-width:     480px;
}

.hero__actions { margin-bottom: var(--space-10); }

.hero__meta {
    display:     flex;
    align-items: center;
    gap:         var(--space-5);
    flex-wrap:   wrap;
}
.hero__meta-item {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   0.8rem;
    color:       var(--fg-muted);
}
.hero__meta-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--border-muted); }

.hero__visual {
    position:  relative;
    display:   flex;
    justify-content: center;
}

.hero__panel-stack {
    position: relative;
    width:    260px;
}
.hero__panel-stack .panel-mock:nth-child(2) {
    position:  absolute;
    top:       -20px;
    right:     -60px;
    width:     220px;
    opacity:   0.7;
    transform: scale(0.92);
    z-index:   0;
}
.hero__panel-stack .panel-mock:first-child {
    position: relative;
    z-index:  1;
}

.features { background: var(--bg-void); }
.features__grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   var(--space-5);
}

.showcase { background: var(--bg-deep); }
.showcase__block {
    display:     grid;
    grid-template-columns: 1fr 1fr;
    gap:         var(--space-16);
    align-items: center;
    margin-bottom: var(--space-20);
}
.showcase__block:last-child { margin-bottom: 0; }
.showcase__block--reverse { direction: rtl; }
.showcase__block--reverse > * { direction: ltr; }

.showcase__text .section-label { margin-top: 0; }
.showcase__text h3 { margin-bottom: var(--space-4); }
.showcase__text p  { margin-bottom: var(--space-5); }

.detail-list {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}
.detail-item {
    display:     flex;
    align-items: flex-start;
    gap:         var(--space-3);
    font-size:   0.875rem;
    color:       var(--fg-secondary);
}
.detail-item__bullet {
    width:           20px; height: 20px;
    border-radius:   50%;
    background:      var(--teal-dim);
    border:          1px solid rgba(78,201,176,0.2);
    color:           var(--teal);
    font-size:       0.65rem;
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    margin-top:      1px;
}
.detail-item__bullet--gold { background: var(--gold-dim); border-color: rgba(224,168,0,0.2); color: var(--gold); }
.detail-item__bullet--blue { background: var(--blue-dim); border-color: rgba(86,156,214,0.2); color: var(--blue); }

.stats { background: var(--bg-surface); }
.stats__grid {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   var(--space-5);
}

.install { background: var(--bg-void); text-align: center; }
.install__panel {
    background:    var(--bg-raised);
    border:        1px solid var(--border-muted);
    border-radius: var(--radius-xl);
    padding:       var(--space-12) var(--space-16);
    position:      relative;
    overflow:      hidden;
    max-width:     640px;
    margin-inline: auto;
}
.install__panel::before {
    content:    '';
    position:   absolute;
    top: 0; left: 0; right: 0;
    height:     1px;
    background: linear-gradient(90deg, transparent, var(--teal), transparent);
}
.install__panel h2 { margin-bottom: var(--space-4); }
.install__panel p  { margin-bottom: var(--space-8); }

.install__cmd {
    background:    var(--bg-void);
    border:        1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    padding:       var(--space-4) var(--space-5);
    font-family:   var(--font-mono);
    font-size:     0.85rem;
    color:         var(--teal);
    display:       flex;
    align-items:   center;
    justify-content: space-between;
    gap:           var(--space-4);
    margin-bottom: var(--space-6);
    cursor:        text;
    user-select:   all;
}
.install__cmd-copy {
    background:    transparent;
    border:        none;
    color:         var(--fg-muted);
    cursor:        pointer;
    font-size:     0.75rem;
    padding:       4px 8px;
    border-radius: var(--radius-sm);
    transition:    color var(--transition-fast), background var(--transition-fast);
    font-family:   var(--font-body);
    white-space:   nowrap;
}
.install__cmd-copy:hover { color: var(--teal); background: var(--teal-dim); }
.install__cmd-copy.copied { color: var(--teal); }

.install__actions { display: flex; gap: var(--space-3); justify-content: center; }

.footer {
    border-top:  1px solid var(--border-subtle);
    padding:     var(--space-8) 0;
    background:  var(--bg-void);
}
.footer__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    flex-wrap:       wrap;
    gap:             var(--space-4);
}
.footer__copy {
    font-size: 0.8rem;
    color:     var(--fg-muted);
}
.footer__links { display: flex; gap: var(--space-5); }
.footer__link  { font-size: 0.8rem; color: var(--fg-muted); transition: color var(--transition-fast); }
.footer__link:hover { color: var(--teal); }

@media (max-width: 1024px) {
    .features__grid { grid-template-columns: repeat(2, 1fr); }
    .stats__grid    { grid-template-columns: repeat(2, 1fr); }
    .showcase__block { grid-template-columns: 1fr; gap: var(--space-8); }
    .showcase__block--reverse { direction: ltr; }
    .hero__content { grid-template-columns: 1fr; }
    .hero__visual  { display: none; }
}

@media (max-width: 700px) {
    .features__grid { grid-template-columns: 1fr; }
    .stats__grid    { grid-template-columns: repeat(2, 1fr); }
    .install__panel { padding: var(--space-8); }
}