/* Home page hero (resources/views/web/home.blade.php). The glass header inside it and the shared
   buttons (.xp-btn-blue, .xp-btn-glass, .xp-arrow) live in site-header.css, which the layout loads first.
   Everything here is scoped under .xp-hero so it cannot leak into the rest of the site,
   and it resets the global rules custom.css puts on h1 / ul / a / p.

   Sizing: the design is drawn on a 1440px canvas. Each size is
   clamp(floor, N/14.4 vw, N px): exactly the design value at 1440px and wider,
   shrinking in proportion below that (e.g. a 1920px screen at 150% scaling = 1280px). */

.xp-hero {
    --xp-bg: #040C1E;
    position: relative;
    background: var(--xp-bg) url("../images/home-hero-bg.jpg") center / cover no-repeat;
    font-family: 'Poppins', sans-serif;
    color: #fff;
    -webkit-font-smoothing: antialiased;
}
.xp-hero *, .xp-hero *::before, .xp-hero *::after { box-sizing: border-box; }
.xp-hero a { color: inherit; text-decoration: none; }
.xp-hero ul { list-style: none; margin: 0; padding: 0; }
.xp-hero h1, .xp-hero p { margin: 0; }

.xp-hero-inner {
    max-width: 1440px;
    min-height: min(690px, 47.917vw);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: clamp(60px, 10.694vw, 154px);
    padding: 22px 24px 30px;
}

/* ---------- Hero buttons ---------- */
.xp-btn-explore {
    width: clamp(180px, 16.667vw, 240px); height: clamp(50px, 4.444vw, 64px); border-radius: clamp(12px, 0.972vw, 14px);
    gap: clamp(12px, 1.528vw, 22px); padding: 0 clamp(12px, 1.389vw, 20px) 0 clamp(20px, 2.5vw, 36px);
    font-size: clamp(15px, 1.25vw, 18px);
}
.xp-btn-explore .xp-arrow { width: clamp(30px, 2.778vw, 40px); height: auto; }
.xp-btn-contact {
    width: clamp(180px, 16.806vw, 242px); height: clamp(48px, 4.306vw, 62px); border-radius: 12px;
    font-size: clamp(15px, 1.181vw, 17px); font-weight: 500;
    border: 1px solid rgba(255,255,255,.5);
    background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0) 50%), rgba(5,14,31,.35);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.08);
}

/* ---------- Hero content ---------- */
.xp-hero-content { display: flex; flex-direction: column; gap: clamp(20px, 2.222vw, 32px); padding-left: clamp(8px, 4.861vw, 70px); }
.xp-hero-text { display: flex; flex-direction: column; gap: 2px; }
.xp-hero h1.xp-title { display: flex; flex-direction: column; gap: 2px; font-size: inherit; line-height: normal; text-transform: none; }
.xp-eyebrow {
    font-family: 'Montserrat', sans-serif; font-weight: 500; font-size: clamp(15px, 1.806vw, 26px); letter-spacing: .20em; line-height: 1.3;
    text-transform: uppercase; color: rgba(255,255,255,.95);
}
.xp-word {
    font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: clamp(52px, 7.083vw, 102px); letter-spacing: -.03em; line-height: 1.06;
    filter: drop-shadow(0 0 28px rgba(0,168,255,.30));
}
.xp-w { background: linear-gradient(180deg, #FFFFFF, #E6F7FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xp-c { background: linear-gradient(90deg, #5BE3FF 0%, #1EC8FF 45%, #0A9BFF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.xp-hero p.xp-sub { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: clamp(18px, 1.944vw, 28px); line-height: 1.3; color: rgba(255,255,255,.96); }

.xp-hero-buttons { display: flex; align-items: center; gap: clamp(14px, 1.667vw, 24px); flex-wrap: wrap; }

.xp-hero .xp-features { display: flex; align-items: center; gap: clamp(16px, 1.944vw, 28px); padding-top: clamp(6px, 1.528vw, 22px); }
.xp-feature { display: flex; align-items: center; gap: clamp(14px, 1.806vw, 26px); }
.xp-tile {
    position: relative; flex: none; width: clamp(46px, 4.167vw, 60px); height: clamp(46px, 4.167vw, 60px); border-radius: 12px; display: grid; place-items: center;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,0) 50%), rgba(10,26,54,.72);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    box-shadow: inset 0 1px 2px rgba(255,255,255,.10), 0 0 18px rgba(0,144,255,.28);
}
.xp-tile::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(180deg, rgba(111,182,255,.45), rgba(42,107,255,.15));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude;
}
.xp-tile svg { width: clamp(24px, 2.083vw, 30px); height: auto; filter: drop-shadow(0 0 4px rgba(0,180,255,.7)); }
.xp-feature > span:last-child { font-weight: 600; font-size: clamp(13px, 1.042vw, 15px); line-height: 1.65; color: rgba(255,255,255,.95); }
.xp-sep { width: 1px; height: clamp(30px, 2.778vw, 40px); background: linear-gradient(180deg, transparent, rgba(255,255,255,.35), transparent); }

/* ---------- Phone ---------- */
@media (max-width: 720px) {
    .xp-hero-inner { gap: 56px; padding: 16px 16px 40px; min-height: 0; }
    .xp-hero-content { padding-left: 4px; gap: 26px; }
    .xp-btn-explore, .xp-btn-contact { width: 100%; }
    .xp-hero .xp-features { flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 6px; }
    .xp-sep { display: none; }
}