/*
PURPOSE OF THIS FILE:
This stylesheet controls ONLY the Home page (index.html).

MAIN THINGS YOU MAY WANT TO EDIT:
- Hero background image
- Hero spacing and text size
- Dashboard image size/position
- Home feature cards
- Homepage statistics

IMPORTANT:
The hero background comes from:
assets/images/hero-background.svg

To use your own JPG/PNG/WebP, replace the URL below.
Example:
background-image: url("../images/my-background.jpg");

/* =========================================================
   HOME PAGE TRANSPARENT HEADER

   PURPOSE:
   On the Home page only, the navigation bar becomes
   transparent and sits directly on top of the hero image.

   Other pages still use the normal header style
   from global.css.
========================================================= */

.site-header {
    position: absolute;

    top: 0;
    left: 0;

    width: 100%;

    z-index: 1000;

    /* Remove green navigation background */
    background: transparent;

    /* Remove blur so hero image is clearly visible */
    backdrop-filter: none;

    /* Very subtle separator */
    border-bottom: none;

    box-shadow: none;
}

/* =========================================================
   HEADER "START A PROJECT" BUTTON
   --------------------------------
   The color/gradient for .header-cta is intentionally NOT
   overridden here. It is controlled site-wide in global.css,
   so the Home page automatically matches all other pages.
========================================================= */


/* =========================================================
   HOME HERO

   PURPOSE:
   Main Home page hero background.

   The background starts from the very top of the page,
   including behind the transparent navigation bar.
========================================================= */

.home-hero {

    position: relative;

    min-height: 650px;

    overflow: hidden;

    color: var(--white);

    /*
       IMPORTANT:
       The visible Header + Hero background is controlled by
       .home-top-background below because index.html wraps both
       the header and hero inside that single element.

       Keeping background-image / size / position out of .home-hero
       prevents two background systems from overlapping.
    */
}


/* =========================================================
   HERO INNER CONTENT

   PURPOSE:
   Controls the text and visual content inside the hero.
========================================================= */
.home-hero-inner {

    min-height: 500px;

    display: grid;

    grid-template-columns: 0.88fr 1.12fr;

    align-items: center;

    gap: 65px;

    /*
       Extra top space for transparent navigation.
    */
    padding: 125px 0 65px;

    position: relative;

    z-index: 2;
}


.home-hero-copy {
    position: relative;
    z-index: 3;

    /*
       IMPORTANT:
       Do NOT manually move the hero text in home.css.

       The X/Y position of the complete
       "Zero-Knowledge Privacy Layer for Enterprise AI."
       content block is controlled ONLY from positioning-home.css:

       --home-hero-text-x
       --home-hero-text-y

       Keeping transform out of this file prevents both CSS files
       from fighting each other.
    */
}

.home-hero h1 {
  margin: 0;
  font-size: clamp(48px, 6vw, 78px);
  line-height: 0.97;
  letter-spacing: -0.058em;
}

.home-hero-copy > p:not(.eyebrow) {
  max-width: 530px;
  margin: 25px 0 0;
  color: rgba(255,255,255,0.72);
  font-size: 17px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 32px;
}

.home-visual {
  position: relative;
  z-index: 3;
}

.home-visual img {
  width: 100%;
  filter: drop-shadow(0 32px 55px rgba(4, 33, 27, 0.28));
}

.home-intro-grid {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 80px;
  align-items: start;
}

.home-intro-grid .lead {
  color: var(--text);
  font-size: 18px;
  line-height: 1.8;
}

.home-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 46px;
}

.home-service-card {
  padding: 30px;
}

.home-service-card span {
  color: #45aa80;
  font-size: 12px;
  font-weight: 800;
}

.home-service-card h3 {
  margin: 42px 0 12px;
  font-size: 22px;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.home-service-card p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
}

/* =========================================================
   HOME STATISTICS BOX BACKGROUND
   AFFECTS ONLY:
   LOCAL / PII / ANY LLM / ZK
========================================================= */

.stats-band {
    background-image: url("../images/File2.png");
    background-repeat: no-repeat;

    background-size: cover;
    background-position: center 72%;

    width: 100%;
    height: clamp(380px, 25vw, 580px);
    box-sizing: border-box;

    border-radius: 30px;
    overflow: hidden;

    color: #071a34;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.stat {
  padding: 12px 0;
}

.stat strong {
  display: block;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1;
  letter-spacing: -0.05em;
}

.stat span {
    display: block;

    margin-top: 10px;

    color: rgba(7, 26, 52, 0.70);

    font-size: 13px;
}
@media (max-width: 900px) {

    .home-hero-inner,
    .home-intro-grid {
        grid-template-columns: 1fr;
    }

    .home-top-background {
        background-size: auto 100%;
        background-position: 65% center;
    }

    .home-hero-inner {
        padding: 110px 0 60px;
        gap: 35px;
    }

    .home-visual {
        max-width: 720px;
    }

    .home-services {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {

    .home-hero,
    .home-hero-inner {
        min-height: auto;
    }

    .home-top-background {
        background-position: 68% center;
    }

    .home-hero-inner {
        padding: 100px 0 60px;
    }

    .hero-actions {
        align-items: flex-start;
        flex-direction: column;
    }

    .stats-grid {
        grid-template-columns: 1fr;
    }
}
/* ============================================================
   HOME HEADER + HERO — ONE CONTINUOUS BACKGROUND
   ============================================================ */

.home-top-background {
    position: relative;

    background-image: url("../images/hero-background.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;

    overflow: hidden;
}


/* Hero stays transparent so the shared wrapper background is visible */
.home-top-background .home-hero {
    background: transparent !important;
}


/* Remove any old pseudo-element background */
.home-top-background .home-hero::before,
.home-top-background .home-hero::after {
    content: none !important;
    display: none !important;
}


/* Header stays transparent so it uses the SAME background underneath */
.home-top-background .site-header {
    background: transparent !important;
}


/* Main hero heading — dark because new background is light */
.home-top-background .home-hero-copy h1 {
    color: #071a34 !important;
}


/* Hero description */
.home-top-background .home-hero-copy > p:not(.eyebrow) {
    color: #243b5a !important;
}


/* Small green text */
.home-top-background .home-hero-copy .eyebrow {
    color: #043633 !important;
}


/* Navigation */
.home-top-background .nav-links a {
    color: #071a34 !important;
}


/* Logo brand text */
.home-top-background .brand {
    color: #071a34 !important;
}


/* =========================================================
   HOME HERO SECONDARY CTA — "Talk to us"
   Uses the same blue → green shading as the main PrivAI CTA.
========================================================= */
.home-top-background .btn-outline {
    background: linear-gradient(
        135deg,
        #0c78e8 0%,
        #168fe6 35%,
        #16b995 100%
    ) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.30) !important;

    box-shadow:
        0 8px 22px rgba(12, 120, 232, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

.home-top-background .btn-outline:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(12, 120, 232, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);

    filter: brightness(1.07);
}

/* =========================================================
   HOME FINAL CTA BOX
   AFFECTS ONLY:
   "Protect sensitive enterprise data..."
========================================================= */

html[data-page="home"] .cta-band {

    /*background-image: url("../images/stats-background.png") !important;*/

    background: #ffffff !important;

    color: #470303 !important;

    border-color: #b7cee4 !important;

    background-repeat: no-repeat !important;

    background-size: cover !important;

    background-position: center center !important;

    border-radius: 24px;

    border: 1px solid rgba(70, 140, 220, 0.18);

    box-shadow:
        0 18px 45px rgba(252, 252, 253, 0.12);
}


/* CTA heading */
html[data-page="home"] .cta-band h3 {

    color: #071a34 !important;
}


/* =========================================================
   HOME FINAL CTA BUTTON — "Talk to Safeify"
   Same blue → green visual language as Try PrivAI Live
   and the shared Start a project button.
========================================================= */
html[data-page="home"] .cta-band .btn {
    background: linear-gradient(
        135deg,
        #0c78e8 0%,
        #168fe6 35%,
        #16b995 100%
    ) !important;

    color: #ffffff !important;

    border: 1px solid rgba(255, 255, 255, 0.30) !important;

    box-shadow:
        0 8px 22px rgba(12, 120, 232, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease,
        filter 0.25s ease;
}

html[data-page="home"] .cta-band .btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 12px 30px rgba(12, 120, 232, 0.30),
        inset 0 1px 0 rgba(255, 255, 255, 0.30);

    filter: brightness(1.07);
}




/* =========================================================
   HOME FOOTER — BLUE GLASS RIBBON STYLE
========================================================= */

html[data-page="home"] .site-footer {

    background-image: url("../images/File1.png") !important;

    background-repeat: no-repeat !important;

    background-size: cover !important;

    background-position: center center !important;

    background-color: transparent !important;

    color: #071a34 !important;

    border-top: 1px solid rgba(50, 120, 220, 0.15);
}


html[data-page="home"] .site-footer .footer-brand,
html[data-page="home"] .site-footer .footer-brand span {
    color: #071a34 !important;
}


html[data-page="home"] .site-footer .footer-copy {
    color: rgba(7, 26, 52, 0.72) !important;
}


html[data-page="home"] .site-footer .footer-links strong {
    color: #071a34 !important;
}


html[data-page="home"] .site-footer .footer-links a {
    color: rgba(7, 26, 52, 0.72) !important;
}


html[data-page="home"] .site-footer .footer-links a:hover {
    color: #1479ff !important;
}


html[data-page="home"] .site-footer .footer-bottom {

    color: rgba(7, 26, 52, 0.60) !important;

    border-top: 1px solid rgba(7, 26, 52, 0.12) !important;
}