/* ─── Homepage sections ───────────────────────────────── */

/* ── Product panels (stacked full-bleed) ── */
.product-panel {
    background: var(--navy);
    overflow: hidden;
    position: relative;
}
/* No gap between panels — they flow continuously */
.product-panel + .product-panel { margin-top: 0; border-top: 1px solid rgba(255,255,255,.07); }

/* Panel colour variants */
.panel--dark  { background: var(--navy); }
.panel--darker{ background: var(--navy-dark); }
.panel--light {
    background: var(--white);
}
.panel--light .panel-inner::before { background: radial-gradient(circle, rgba(0,194,255,.06), transparent 65%); }
.panel--light .panel-eyebrow  { color: var(--cyan-dark); }
.panel--light .panel-headline { color: var(--navy); }
.panel--light .panel-sub      { color: var(--text-muted); }
.panel--light .panel-price    { color: var(--text-muted); }
.panel--light .panel-price strong { color: var(--cyan-dark); }

.panel--gray  { background: var(--gray-50); }
.panel--gray .panel-inner::before { background: radial-gradient(circle, rgba(0,194,255,.05), transparent 65%); }
.panel--gray .panel-eyebrow  { color: var(--cyan-dark); }
.panel--gray .panel-headline { color: var(--navy); }
.panel--gray .panel-sub      { color: var(--text-muted); }

.panel-inner {
    max-width: var(--container);
    margin: 0 auto;
    padding: 80px 24px 72px;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
}

/* Ambient glow */
.panel-inner::before {
    content: '';
    position: absolute;
    width: 600px; height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--cyan-glow), transparent 65%);
    top: -100px; left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.panel-eyebrow {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--cyan);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.panel-eyebrow span { opacity: .55; }

.panel-headline {
    font-family: var(--font-heading);
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--white);
    margin-bottom: 16px;
    max-width: 860px;
}

.panel-sub {
    font-size: 18px;
    color: rgba(255,255,255,.68);
    max-width: 640px;
    margin-bottom: 8px;
    line-height: 1.55;
}

.panel-price {
    font-size: 16px;
    color: rgba(255,255,255,.5);
    margin-bottom: 28px;
}
.panel-price strong { color: var(--cyan); font-weight: 600; }

.panel-ctas {
    display: flex;
    gap: 14px;
    margin-bottom: 48px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Panel illustrations (CSS-drawn placeholders) */
.panel-stage {
    width: 100%;
    max-width: 720px;
    height: 260px;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    margin: 0 auto;
}

/* Laptop stage */
.stage-laptop {
    width: 480px;
    position: relative;
}
.stage-laptop__lid {
    width: 480px; height: 300px;
    background: #0D0E14;
    border-radius: 14px 14px 4px 4px;
    border: 3px solid #1A1B25;
    position: relative;
    overflow: hidden;
}
.stage-laptop__lid::after {
    content: '';
    position: absolute;
    inset: 16px;
    background: linear-gradient(135deg, var(--navy-light), var(--cyan) 120%);
    border-radius: 4px;
    opacity: .85;
}
.stage-laptop__base {
    height: 18px;
    background: linear-gradient(180deg, #C8C8CC, #8E8E93);
    border-radius: 0 0 14px 14px;
    width: 100%;
}
.stage-laptop__shadow {
    position: absolute;
    bottom: -8px; left: 5%;
    width: 90%; height: 20px;
    background: radial-gradient(ellipse, rgba(0,0,0,.25), transparent 70%);
    filter: blur(6px);
}

/* Network rack stage */
.stage-rack {
    background: #050D1E;
    border: 1px solid rgba(0,194,255,.2);
    border-radius: 14px;
    width: 380px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 9px;
    box-shadow: 0 40px 80px rgba(0,0,0,.6), 0 0 0 1px rgba(0,194,255,.08);
}
.stage-rack__unit {
    height: 28px;
    background: linear-gradient(90deg, #0A1530, #112045);
    border-radius: 5px;
    position: relative;
    overflow: hidden;
}
.stage-rack__unit::before {
    content: '';
    position: absolute;
    left: 8px; top: 50%;
    transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 12px 0 0 var(--cyan), 24px 0 0 var(--success);
    animation: blink 2s ease-in-out infinite;
}
.stage-rack__unit:nth-child(2)::before { animation-delay:.3s }
.stage-rack__unit:nth-child(3)::before { animation-delay:.6s }
.stage-rack__unit:nth-child(4)::before { animation-delay:.9s }
.stage-rack__unit:nth-child(5)::before { animation-delay:1.2s }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* Service grid stage */
.stage-services {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    width: 380px;
}
.stage-services__card {
    aspect-ratio: 1;
    border-radius: 16px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}
.stage-services__card:nth-child(1) { background: rgba(0,194,255,.08); border-color: rgba(0,194,255,.18); }
.stage-services__card:nth-child(5) { background: rgba(16,185,129,.08); border-color: rgba(16,185,129,.18); }

/* Promo / rent stage */
.stage-promo {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
.stage-promo__tag {
    width: 180px; height: 180px;
    background: linear-gradient(135deg, var(--warning) 0%, #DC7B00 100%);
    border-radius: 28px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--font-heading);
    font-size: 96px;
    font-weight: 800;
    color: var(--white);
    transform: rotate(-10deg);
    box-shadow: 0 32px 64px rgba(245,158,11,.4);
}
.stage-promo__badge {
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    padding: 20px;
    color: rgba(255,255,255,.7);
    font-size: 14px;
    text-align: left;
    line-height: 1.6;
    max-width: 180px;
}
.stage-promo__badge strong { display: block; color: var(--white); font-size: 16px; margin-bottom: 4px; }

/* ── Offer strip ── */
.offer-strip {
    background: var(--cyan);
    padding: 11px 0;
    overflow: hidden;
}
.offer-strip__inner {
    display: flex;
    justify-content: center;
    gap: 32px;
    flex-wrap: wrap;
}
.offer-strip__item {
    font-size: 13px;
    font-weight: 600;
    color: var(--navy);
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
}
.offer-strip__item svg { flex-shrink: 0; }

/* ── Category grid (ROG card style) ── */
.category-section {
    background: var(--white);
    padding: 28px 0;
    border-bottom: 1px solid var(--border);
}
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 32px;
}
.category-tile {
    background: var(--gray-50);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--text);
    transition: var(--t);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.category-tile:hover {
    background: var(--white);
    border-color: var(--cyan);
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    color: var(--navy);
}
.category-tile__icon {
    width: 56px; height: 56px;
    background: var(--white);
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
    border: 1px solid var(--border);
    flex-shrink: 0;
}
.category-tile:hover .category-tile__icon {
    background: rgba(0,194,255,.06);
    border-color: rgba(0,194,255,.2);
}
.category-tile__name {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 14px;
    color: var(--navy);
}
.category-tile__from {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}

/* ── The latest ── */
.latest-section {
    background: var(--white);
    padding: 64px 0;
    border-top: 1px solid var(--border);
}
.latest-section .section-title { color: var(--text-muted); }
.latest-section .section-title strong { color: var(--text); font-weight: 700; }
.latest-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 24px;
}
.latest-tile {
    border-radius: var(--r-xl);
    min-height: 420px;
    padding: 40px 40px 0;
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: var(--t);
    position: relative;
}
.latest-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); color: var(--text); }
.tile--mint  { background: linear-gradient(180deg, #E0F7F0 0%, #C3EDE0 100%); }
.tile--ice   { background: linear-gradient(180deg, #E0F0FF 0%, #C3D9F7 100%); }
.tile--sand  { background: linear-gradient(180deg, #FBF1E0 0%, #F4DCB5 100%); }
.tile--lilac { background: linear-gradient(180deg, #EEE5FF 0%, #D5C2FF 100%); }
.tile-label  { font-size: 12px; font-weight: 700; color: var(--cyan-dark); letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; }
.latest-tile h3 { font-size: clamp(20px,2.5vw,30px); color: var(--navy); margin-bottom:8px; }
.tile-price  { font-size:15px; color: var(--text-muted); margin-bottom:14px; }
.tile-buy    { font-size:15px; color:var(--cyan-dark); font-weight:600; display:inline-flex;align-items:center;gap:4px; }
.tile-image  { flex:1; display:flex; align-items:flex-end; justify-content:center; padding-top:20px; }
.tile-image img { max-height:200px; object-fit:contain; filter:drop-shadow(0 12px 24px rgba(11,27,61,.18)); }

/* ── SolvIT difference ── */
.difference-section {
    background: var(--gray-50);
    padding: 64px 0;
}
.difference-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 32px;
}
.diff-card {
    background: var(--white);
    border-radius: var(--r-lg);
    padding: 28px 24px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    transition: var(--t);
    text-decoration: none;
    color: var(--text);
    display: flex;
    flex-direction: column;
}
.diff-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: rgba(0,194,255,.25);
    color: var(--text);
}
.diff-card__icon { font-size: 28px; margin-bottom: 16px; line-height: 1; }
.diff-card h4 { color: var(--navy); font-size: 17px; margin-bottom: 8px; }
.diff-card p { font-size: 14px; line-height: 1.55; flex: 1; margin-bottom: 14px; }
.diff-card__link { font-size: 13.5px; color: var(--cyan-dark); font-weight: 600; }

/* ── Visit us ── */
.visit-section {
    background: var(--white);
    padding: 64px 0;
    border-top: 1px solid var(--border);
}
.visit-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    margin-top: 32px;
}
.visit-map {
    border-radius: var(--r-lg);
    overflow: hidden;
    height: 320px;
    border: 1px solid var(--border);
    background: var(--gray-50);
}
.visit-map iframe { width: 100%; height: 100%; border: none; }
.visit-info { display: flex; flex-direction: column; gap: 20px; }
.visit-detail { display: flex; gap: 14px; align-items: flex-start; }
.visit-detail__icon { color: var(--cyan-dark); flex-shrink: 0; margin-top: 2px; }
.visit-detail h5 { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: 3px; }
.visit-detail p, .visit-detail a {
    font-size: 15px;
    color: var(--text);
    line-height: 1.5;
    text-decoration: none;
}
.visit-detail a:hover { color: var(--cyan-dark); }
.visit-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

/* ── Trust band ── */
.trust-band {
    background: var(--navy-dark);
    padding: 28px 0;
    border-top: 1px solid rgba(255,255,255,.06);
}
.trust-band__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.trust-badges { display: flex; gap: 12px; flex-wrap: wrap; }
.trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r-pill);
    padding: 5px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: rgba(255,255,255,.65);
}
.trust-badge svg { color: var(--cyan); }
.partner-logos { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.partner-logo {
    font-family: var(--font-heading);
    font-size: 15px;
    font-weight: 700;
    color: rgba(255,255,255,.3);
    transition: var(--t-fast);
}
.partner-logo:hover { color: rgba(255,255,255,.7); }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .category-grid  { grid-template-columns: repeat(4, 1fr); }
    .difference-grid { grid-template-columns: repeat(2, 1fr); }
    .visit-grid     { grid-template-columns: 1fr; }
    .visit-map      { height: 260px; }
}
/* ── E-commerce hero (Panel 1 — two column) ── */
/* Note: uses .product-panel for dark bg, .hero-panel adds two-column layout */
.hero-panel {
    padding: 60px 0 0;
}
.hero-panel::before {
    content: '';
    position: absolute;
    width: 700px; height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,194,255,.12), transparent 65%);
    top: -200px; left: -100px;
    pointer-events: none;
    z-index: 0;
}
.hero-panel__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    position: relative;
}
.hero-panel__copy { padding-bottom: 60px; }
.hero-panel__eyebrow {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--cyan);
    letter-spacing: .05em;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.hero-panel__eyebrow .sep { opacity: .4; }
.hero-panel__headline {
    font-family: var(--font-heading);
    font-size: clamp(36px, 5vw, 60px);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.025em;
    color: var(--white);
    margin-bottom: 14px;
}
.hero-panel__sub {
    font-size: 16px;
    color: rgba(255,255,255,.62);
    line-height: 1.6;
    max-width: 480px;
    margin-bottom: 20px;
}
/* Quick price tags */
.hero-panel__prices {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 28px;
}
.hero-price-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(255,255,255,.65);
    text-decoration: none;
    transition: var(--t-fast);
    width: fit-content;
}
.hero-price-tag:hover { color: var(--white); }
.hero-price-tag strong { color: var(--cyan); font-weight: 600; }
.hero-panel__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Product showcase (right side) */
.hero-panel__products {
    position: relative;
    padding-bottom: 0;
}
.hero-products-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.hero-product-card {
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: var(--r);
    padding: 16px;
    text-decoration: none;
    transition: var(--t);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.hero-product-card:hover {
    background: rgba(255,255,255,.11);
    border-color: rgba(0,194,255,.35);
    transform: translateY(-2px);
}
.hero-product-card__img {
    background: rgba(255,255,255,.06);
    border-radius: var(--r-sm);
    aspect-ratio: 4/3;
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}
.hero-product-card__img img {
    width: 100%; height: 100%;
    object-fit: contain;
    padding: 12px;
}
.hero-product-card__icon {
    font-size: 40px;
    text-align: center;
    padding: 20px;
    background: rgba(255,255,255,.04);
    border-radius: var(--r-sm);
}
.hero-product-card__info {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.hero-product-card__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.hero-product-card__price {
    font-size: 13px;
    color: var(--cyan);
    font-weight: 600;
}
.hero-product-card__price .woocommerce-Price-amount { font-size: 13px; }
.hero-view-all {
    display: block;
    text-align: center;
    margin-top: 12px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255,255,255,.5);
    text-decoration: none;
    transition: var(--t-fast);
    padding: 8px;
}
.hero-view-all:hover { color: var(--cyan); }

/* Responsive */
@media (max-width: 1024px) {
    .hero-panel__inner { grid-template-columns: 1fr; }
    .hero-panel__copy { padding-bottom: 0; }
    .hero-panel { padding: 48px 0 0; }
    .hero-products-grid { grid-template-columns: repeat(4, 1fr); }
    .hero-product-card { flex-direction: row; align-items: center; }
    .hero-product-card__img { width: 60px; height: 60px; flex-shrink: 0; }
}
@media (max-width: 640px) {
    .hero-products-grid { grid-template-columns: repeat(2, 1fr); }
    .hero-product-card { flex-direction: column; }
    .hero-product-card__img { width: 100%; height: auto; }
}

/* ── Showroom cards (Panel 2 — light bg) ── */
.showroom-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    max-width: 780px;
    margin-top: 40px;
}
.showroom-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px 20px;
    text-align: left;
    box-shadow: var(--shadow-sm);
}
.showroom-card__icon { font-size: 28px; margin-bottom: 10px; line-height: 1; }
.showroom-card h4 { color: var(--navy); font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.showroom-card p { font-size: 14px; color: var(--text-muted); line-height: 1.65; }
.showroom-card p span { color: var(--gray-400); }
.showroom-card p a { color: var(--cyan-dark); font-weight: 500; }

/* ── Services list (Panel 3 — darker bg) ── */
.services-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    max-width: 680px;
    width: 100%;
    margin-top: 40px;
}
.service-card-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: var(--r);
    padding: 18px 20px;
    text-align: left;
    transition: var(--t-fast);
}
.service-card-item:hover { background: rgba(255,255,255,.09); border-color: rgba(0,194,255,.25); }
.service-card-item > span { font-size: 26px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.service-card-item strong { display: block; color: var(--white); font-size: 15px; margin-bottom: 2px; }
.service-card-item p { font-size: 13px; color: rgba(255,255,255,.55); margin: 0; }

/* ── Rental cards (Panel 4 — gray bg) ── */
.rental-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 860px;
    width: 100%;
    margin-top: 40px;
}
.rental-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 24px 16px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    transition: var(--t);
}
.rental-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(0,194,255,.25); }
.rental-card__icon { font-size: 36px; margin-bottom: 10px; line-height: 1; }
.rental-card__label { font-family: var(--font-heading); font-weight: 700; color: var(--navy); font-size: 15px; margin-bottom: 4px; }
.rental-card__note { font-size: 12px; color: var(--text-muted); line-height: 1.5; }

@media (max-width: 768px) {
    .panel-inner    { padding: 56px 20px 48px; }
    .panel-headline { font-size: clamp(32px,7vw,56px); }
    .panel-sub      { font-size: 16px; }
    .category-grid  { grid-template-columns: repeat(4, 1fr); gap: 8px; }
    .category-tile  { padding: 16px 10px; }
    .latest-grid    { grid-template-columns: 1fr; }
    .difference-grid { grid-template-columns: repeat(2, 1fr); }
    .trust-band__inner { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
    .category-grid  { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .category-tile__icon { width: 44px; height: 44px; font-size: 22px; }
    .difference-grid { grid-template-columns: 1fr; }
    .offer-strip__inner { gap: 16px; justify-content: flex-start; padding: 0 16px; overflow-x: auto; flex-wrap: nowrap; }
    .stage-laptop { width: 280px; }
    .stage-laptop__lid { width: 280px; height: 175px; }
    .showroom-cards { grid-template-columns: 1fr; }
    .services-cards { grid-template-columns: 1fr; }
    .rental-cards   { grid-template-columns: repeat(2, 1fr); }
}