/* Homepage "Our Services" + "Featured Products" v2. Loaded after homepage.css. */

/* ---- shared section heading ---- */
#homepage .hs-head { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:end; gap:18px 56px; margin-bottom:44px; }
#homepage .hs-head--row { display:flex; justify-content:space-between; align-items:flex-end; gap:20px; flex-wrap:wrap; }
#homepage .hs-head h2 { margin:0; font-size:clamp(30px,3.6vw,48px); font-weight:800; letter-spacing:-.03em; line-height:1.08; }
#homepage .hs-kicker { display:inline-flex; align-items:center; gap:10px; margin:0 0 14px; color:#93b9ff; font-size:12px; font-weight:800; letter-spacing:.18em; text-transform:uppercase; }
#homepage .hs-kicker::before { content:""; width:26px; height:2px; border-radius:2px; background:#ffc107; }
#homepage .hs-lead { margin:0; justify-self:end; max-width:52ch; color:#a9c1e6; font-size:17px; line-height:1.7; }
#homepage .hs-all {
    display:inline-flex; align-items:center; gap:8px; padding:12px 20px; border-radius:12px;
    border:1px solid rgba(147,185,255,.3); background:rgba(255,255,255,.05); color:#dbe8ff; font-size:14.5px; font-weight:700; text-decoration:none;
}
#homepage .hs-all:hover { background:rgba(255,255,255,.12); border-color:rgba(147,185,255,.6); color:#fff; }
#homepage .hs-all svg { width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
#homepage .hs-all:hover svg { transform:translateX(4px); }

/* ---- services ---- */
#homepage > section.home-services { padding:56px 0 88px; border-top:0; }
#homepage #solutions .sv-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
#homepage #solutions .sv-grid > .sv-card {
    position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end;
    min-height:340px; padding:28px; text-align:left; overflow:hidden; border-radius:22px;
    border:1px solid rgba(147,185,255,.2); background:#10213f; color:#fff; text-decoration:none;
    box-shadow:0 18px 44px rgba(0,0,0,.28);
    transition:transform .3s, border-color .3s, box-shadow .3s;
}
#homepage #solutions .sv-grid > .sv-card:hover { transform:translateY(-6px); border-color:rgba(147,185,255,.55); box-shadow:0 30px 64px rgba(0,0,0,.42); }
#homepage #solutions .sv-bg {
    position:absolute; inset:0; z-index:-2; border-radius:0; background-color:#10213f;
    background-size:cover; background-position:center; transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
#homepage #solutions .sv-grid > .sv-card:hover .sv-bg { transform:scale(1.07); }
/* readable text over any photo */
#homepage #solutions .sv-card::after {
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:linear-gradient(180deg,rgba(7,18,40,.25) 0%,rgba(7,18,40,.62) 45%,rgba(7,18,40,.94) 100%);
}
#homepage #solutions .sv-icon {
    position:absolute; left:24px; top:24px; display:grid; place-items:center; width:52px; height:52px; border-radius:15px;
    background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff;
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
#homepage #solutions .sv-icon svg { width:26px; height:26px; margin:0; color:inherit; }
#homepage #solutions .sv-num { position:absolute; right:24px; top:20px; font-size:14px; font-weight:800; letter-spacing:.14em; color:rgba(255,255,255,.6); font-variant-numeric:tabular-nums; }
#homepage #solutions .sv-body h3 { margin:0 0 10px; font-size:24px; font-weight:800; line-height:1.2; letter-spacing:-.02em; color:#fff; }
#homepage #solutions .sv-body p { margin:0 0 18px; max-width:42ch; color:#d3e1f7; font-size:15px; line-height:1.6; }
#homepage #solutions .sv-more { display:inline-flex; align-items:center; gap:8px; color:#ffc107; font-size:14.5px; font-weight:700; }
#homepage #solutions .sv-more svg { width:17px; height:17px; margin:0; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s; }
#homepage #solutions .sv-card:hover .sv-more svg { transform:translateX(5px); }
#homepage #solutions .sv-card:focus-visible { outline:3px solid #93b9ff; outline-offset:4px; }

/* ---- featured products (+ the Shop grid, which uses the same cards) ---- */
#homepage > section.home-featured { padding:40px 0 88px; border-top:0; }
#homepage #featured-products-grid { gap:22px; }
#homepage #featured-products-grid > div,
#homepage #product-grid-homepage > div {
    display:flex; flex-direction:column; border:1px solid rgba(147,185,255,.18); border-radius:20px; overflow:hidden;
    background:linear-gradient(170deg,rgba(24,44,82,.85) 0%,rgba(13,27,54,.9) 100%);
    box-shadow:0 14px 36px rgba(0,0,0,.24); transition:transform .3s, border-color .3s, box-shadow .3s;
}
#homepage #featured-products-grid > div:hover,
#homepage #product-grid-homepage > div:hover { transform:translateY(-6px); border-color:rgba(96,165,250,.7); box-shadow:0 26px 56px rgba(0,0,0,.4); }
/* image area */
#homepage #featured-products-grid > div > div:first-child,
#homepage #product-grid-homepage > div > div:first-child { height:240px; background:#0c1a35; }
#homepage #featured-products-grid > div > div:first-child::after,
#homepage #product-grid-homepage > div > div:first-child::after {
    content:""; position:absolute; left:0; right:0; bottom:0; height:46%; pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(10,22,46,.55));
}
/* category tag */
#homepage #featured-products-grid > div > div:first-child > span,
#homepage #product-grid-homepage > div > div:first-child > span {
    z-index:2; top:14px; left:14px; padding:5px 11px; border:1px solid rgba(255,255,255,.22); border-radius:999px;
    background:rgba(10,22,46,.62); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    font-size:10.5px; font-weight:800; letter-spacing:.1em;
}
/* body */
#homepage #featured-products-grid > div > div:last-child,
#homepage #product-grid-homepage > div > div:last-child { padding:20px 22px 22px; }
#homepage #featured-products-grid h3,
#homepage #product-grid-homepage h3 { font-size:17px; font-weight:700; line-height:1.35; letter-spacing:-.01em; margin-bottom:8px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.7em; }
#homepage #featured-products-grid h3 a,
#homepage #product-grid-homepage h3 a { color:#fff; text-decoration:none; }
#homepage #featured-products-grid h3 a:hover,
#homepage #product-grid-homepage h3 a:hover { color:#93b9ff; }
#homepage #featured-products-grid .text-amber-400,
#homepage #product-grid-homepage .text-amber-400 { color:#fbbf24; font-size:14px; }
#homepage #featured-products-grid p.text-2xl,
#homepage #product-grid-homepage p.text-2xl { margin:2px 0 16px; font-size:24px; font-weight:800; letter-spacing:-.02em; color:#fff; line-height:1.2; }
/* add-to-cart */
#homepage #featured-products-grid button,
#homepage #product-grid-homepage button {
    min-height:48px; border-radius:12px; font-size:14.5px; font-weight:700; color:#fff;
    background:linear-gradient(135deg,#3b82f6,#2563eb); box-shadow:0 8px 20px rgba(37,99,235,.35);
}
#homepage #featured-products-grid button:hover,
#homepage #product-grid-homepage button:hover { background:linear-gradient(135deg,#4f8ff7,#2f6df0); transform:translateY(-1px); }

@media (max-width:1023px) {
    #homepage .hs-head { grid-template-columns:1fr; gap:14px; margin-bottom:34px; }
    #homepage .hs-lead { justify-self:start; }
    #homepage #solutions .sv-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:767px) {
    #homepage > section.home-services { padding:40px 0 64px; }
    #homepage > section.home-featured { padding:24px 0 64px; }
    #homepage #solutions .sv-grid { grid-template-columns:1fr; gap:16px; }
    #homepage #solutions .sv-grid > .sv-card { min-height:300px; padding:24px; }
    #homepage #featured-products-grid > div > div:first-child,
    #homepage #product-grid-homepage > div > div:first-child { height:220px; }
}
@media (prefers-reduced-motion:reduce) {
    #homepage #solutions .sv-grid > .sv-card:hover,
    #homepage #featured-products-grid > div:hover,
    #homepage #product-grid-homepage > div:hover { transform:none; }
}