:root{

/* =========================
   HERO - GARDENER STYLE
========================= */

/* hero */

--hero-min-height:100vh;

--hero-bg:
linear-gradient(
180deg,
#0b120d 0%,
#0f1712 100%
);

--hero-color:rgba(235,245,235,0.88);


/* grid */

--hero-grid-color:
rgba(111,220,140,0.06);

--hero-grid-size:80px;

--hero-grid-opacity:.28;


/* diagonal shape */

--hero-shape-width:42%;
--hero-shape-height:100%;

--hero-shape-bg:
linear-gradient(
180deg,
#6fdc8c 0%,
#2f7d4e 100%
);

--hero-shape-opacity:.92;

--hero-shape-clip:
polygon(
30% 0,
100% 0,
100% 100%,
0 100%
);


/* noise */

--hero-noise-opacity:.04;

--hero-noise-bg:
radial-gradient(
rgba(255,255,255,.6) .8px,
transparent .8px
);

--hero-noise-size:10px;


/* top */

--hero-top-top:24px;

--hero-top-width:
min(92%,1400px);

--hero-top-z:100;


/* logo */

--hero-logo-width:62px;
--hero-logo-height:62px;

--hero-logo-bg:#6fdc8c;
--hero-logo-color:#0b120d;

--hero-logo-size:15px;
--hero-logo-weight:900;

--hero-logo-radius:10px;

--hero-logo-transform:
rotate(-3deg);

--hero-logo-shadow:
0 20px 50px rgba(111,220,140,.25);


/* nav */

--hero-nav-gap:4px;

--hero-nav-padding:8px;

--hero-nav-bg:#111a14;

--hero-nav-border:
rgba(255,255,255,.08);

--hero-nav-link-padding:
12px 18px;

--hero-nav-link-color:
rgba(235,245,235,0.75);

--hero-nav-link-size:14px;

--hero-nav-link-weight:700;

--hero-nav-hover-bg:#6fdc8c;

--hero-nav-hover-color:#0b120d;

--hero-nav-transition:.3s ease;


/* wrap */

--hero-wrap-width:
min(92%,1400px);

--hero-wrap-height:100vh;

--hero-wrap-columns:
1fr .95fr;

--hero-wrap-gap:40px;

--hero-wrap-padding:
90px 0 40px;


/* chip */

--hero-chip-padding:
12px 18px;

--hero-chip-bg:
rgba(111,220,140,.10);

--hero-chip-border:
2px solid #6fdc8c;

--hero-chip-color:#6fdc8c;

--hero-chip-size:12px;

--hero-chip-weight:800;

--hero-chip-spacing:1px;

--hero-chip-margin:26px;


/* title */

--hero-title-size:
clamp(64px,6vw,118px);

--hero-title-line:.9;

--hero-title-spacing:-3px;

--hero-title-weight:900;

--hero-title-color:rgba(235,245,235,0.92);

--hero-title-width:760px;

--hero-title-accent:#6fdc8c;


/* text */

--hero-text-margin:24px;

--hero-text-width:580px;

--hero-text-color:
rgba(235,245,235,0.72);

--hero-text-size:17px;

--hero-text-line:1.8;


/* actions */

--hero-actions-gap:16px;

--hero-actions-margin:40px;

/* =========================
   HERO BUTTONS - GARDENER STYLE
========================= */

/* buttons */

--hero-btn-height:58px;

--hero-btn-padding:
0 34px;

--hero-btn-size:14px;

--hero-btn-weight:800;

--hero-btn-spacing:1px;


/* primary */

--hero-main-bg:#6fdc8c;

--hero-main-shadow:
0 18px 40px rgba(111,220,140,.25);


/* ghost */

--hero-ghost-padding:
0 30px;

--hero-ghost-bg:#121a15;

--hero-ghost-border:
rgba(255,255,255,.10);

--hero-ghost-hover:#17231c;



/* =========================
   TITLE
========================= */

--hero-title-size:clamp(64px,6vw,118px);
--hero-title-line:0.9;
--hero-title-spacing:-3px;
--hero-title-weight:900;

--hero-title-width:760px;
--hero-title-transform:uppercase;

--hero-title-accent:#6fdc8c;


/* =========================
   TEXT
========================= */

--hero-text-margin:24px;
--hero-text-width:580px;
--hero-text-color:rgba(235,245,235,0.72);
--hero-text-size:17px;
--hero-text-line:1.8;


/* =========================
   ACTIONS
========================= */

--hero-actions-gap:16px;
--hero-actions-margin:40px;


/* =========================
   MAIN BUTTON
========================= */

--hero-btn-height:58px;
--hero-btn-padding:0 34px;

--hero-btn-bg:#6fdc8c;
--hero-btn-color:#0b120d;

--hero-btn-size:14px;
--hero-btn-weight:800;

--hero-btn-spacing:1px;

--hero-btn-shadow:
0 18px 40px rgba(111,220,140,0.25);

--hero-btn-transition:0.3s ease;

--hero-btn-hover:-4px;


/* =========================
   GHOST BUTTON
========================= */

--hero-ghost-height:58px;
--hero-ghost-padding:0 30px;

--hero-ghost-border:
rgba(255,255,255,0.10);

--hero-ghost-bg:#121a15;
--hero-ghost-hover:#17231c;

--hero-ghost-color:rgba(235,245,235,0.85);

--hero-ghost-size:14px;
--hero-ghost-weight:700;


/* =========================
   RIGHT SIDE
========================= */

--hero-right-height:620px;


/* =========================
   MAIN CARD
========================= */

--hero-card-width:460px;
--hero-card-height:540px;

--hero-card-skew:-6deg;

--hero-card-shadow:
0 50px 120px rgba(0,0,0,0.45);


/* =========================
   IMAGE
========================= */

--hero-img-width:115%;
--hero-img-height:115%;

--hero-img-scale:1.05;
--hero-img-hover:1.12;

--hero-img-brightness:0.85;
--hero-img-contrast:1.05;

--hero-img-transition:1.2s ease;


/* =========================
   IMAGE OVERLAY
========================= */

--hero-overlay:
linear-gradient(
to top,
rgba(10,18,12,0.55),
rgba(10,18,12,0.05)
);


/* =========================
   FLOAT CARDS
========================= */

--hero-float-padding:24px;

--hero-float-bg:#0f1712;

--hero-float-border:
2px solid #6fdc8c;

--hero-float-shadow:
0 25px 70px rgba(0,0,0,0.35);

--hero-float-animation:
slideFloat 5s ease-in-out infinite;


/* TOP CARD */

--hero-float-top:80px;
--hero-float-left:-20px;


/* BOTTOM CARD */

--hero-float-right:-30px;
--hero-float-bottom:70px;

--hero-float-delay:1.5s;


/* FLOAT TEXT */

--hero-float-number-size:40px;
--hero-float-number-weight:900;
--hero-float-number-color:#6fdc8c;
--hero-float-number-margin:6px;

--hero-float-text-size:13px;
--hero-float-text-color:rgba(235,245,235,0.68);
--hero-float-text-line:1.5;


/* =========================
   GOOGLE BADGE - GARDENER STYLE
========================= */

--hero-google-gap:10px;
--hero-google-min-width:150px;
--hero-google-padding:16px 20px;


/* ANIMATION */

--hero-google-animation:
googleAttention 2.2s ease-in-out infinite;


/* SHINE */

--hero-shine-width:60%;
--hero-shine-bg:
linear-gradient(
90deg,
transparent,
rgba(111,220,140,0.22),
transparent
);

--hero-shine-animation:
shineMove 3s linear infinite;


/* ICON */

--hero-google-icon-size:20px;


/* TEXT */

--hero-google-text-size:20px;


/* =========================
   SCROLL
========================= */

--hero-scroll-width:3px;
--hero-scroll-height:80px;

--hero-scroll-bg:
linear-gradient(
to bottom,
transparent,
#6fdc8c,
transparent
);

--hero-scroll-animation:scrollAnim 2s infinite;





/* =========================
   LAPTOP
========================= */

--hero-laptop-title:clamp(54px,5vw,92px);

--hero-laptop-card-w:380px;
--hero-laptop-card-h:480px;

--hero-laptop-right-h:540px;


/* =========================
   TABLET
========================= */

--hero-tablet-after-w:100%;
--hero-tablet-after-h:36%;

--hero-tablet-clip:
polygon(
0 30%,
100% 0,
100% 100%,
0 100%
);

--hero-tablet-gap:60px;
--hero-tablet-wrap-padding:120px;

--hero-tablet-right-h:500px;

--hero-tablet-card-w:320px;
--hero-tablet-card-h:420px;


/* FLOAT RESET */

--hero-tablet-float-left:0;
--hero-tablet-float-right:0;


/* =========================
   MOBILE
========================= */

--hero-mobile-padding:0 20px;

--hero-mobile-wrap-top:100px;
--hero-mobile-wrap-bottom:70px;

--hero-mobile-title:56px;
--hero-mobile-title-line:0.92;

--hero-mobile-text:15px;
--hero-mobile-text-line:1.7;

--hero-mobile-actions-direction:column;
--hero-mobile-actions-align:stretch;

--hero-mobile-full-width:100%;

--hero-mobile-right-h:400px;

--hero-mobile-card-w:260px;
--hero-mobile-card-h:340px;

--hero-mobile-float-padding:18px;
--hero-mobile-float-number:28px;

--hero-mobile-float-top:20px;
--hero-mobile-float-bottom:20px;




}


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

.future-hero{

position:relative;

min-height:var(--hero-min-height);

overflow:hidden;

background:var(--hero-bg);

color:var(--hero-color);

}


/* INDUSTRIAL GRID */

.future-hero::before{

content:"";

position:absolute;

inset:0;

background-image:

linear-gradient(
var(--hero-grid-color) 1px,
transparent 1px
),

linear-gradient(
90deg,
var(--hero-grid-color) 1px,
transparent 1px
);

background-size:
var(--hero-grid-size)
var(--hero-grid-size);

opacity:
var(--hero-grid-opacity);

pointer-events:none;

}


/* DIAGONAL */

.future-hero::after{

content:"";

position:absolute;

top:0;
right:0;

width:var(--hero-shape-width);

height:var(--hero-shape-height);

background:
var(--hero-shape-bg);

clip-path:
var(--hero-shape-clip);

opacity:
var(--hero-shape-opacity);

}


/* NOISE */

.noise{

position:absolute;

inset:0;

opacity:
var(--hero-noise-opacity);

background-image:
var(--hero-noise-bg);

background-size:
var(--hero-noise-size)
var(--hero-noise-size);

pointer-events:none;

}


/* TOP */

.top-float{

position:absolute;

top:var(--hero-top-top);

left:50%;

transform:
translateX(-50%);

width:
var(--hero-top-width);

z-index:
var(--hero-top-z);

display:flex;

align-items:center;

justify-content:space-between;

}


/* LOGO */

.mini-logo{

width:
var(--hero-logo-width);

height:
var(--hero-logo-height);

display:flex;

align-items:center;

justify-content:center;

background:
var(--hero-logo-bg);

color:
var(--hero-logo-color);

font-size:
var(--hero-logo-size);

font-weight:
var(--hero-logo-weight);

border-radius:
var(--hero-logo-radius);

transform:
var(--hero-logo-transform);

box-shadow:
var(--hero-logo-shadow);

}


/* NAV */

.top-links{

display:flex;

align-items:center;

gap:
var(--hero-nav-gap);

padding:
var(--hero-nav-padding);

background:
var(--hero-nav-bg);

border:
1px solid var(--hero-nav-border);

}

.top-links a{

padding:
var(--hero-nav-link-padding);

color:
var(--hero-nav-link-color);

font-size:
var(--hero-nav-link-size);

font-weight:
var(--hero-nav-link-weight);

transition:
var(--hero-nav-transition);

}

.top-links a:hover{

background:
var(--hero-nav-hover-bg);

color:
var(--hero-nav-hover-color);

}


/* WRAP */

.hero-wrap{

width:
var(--hero-wrap-width);

margin:auto;

min-height:
var(--hero-wrap-height);

display:grid;

grid-template-columns:
var(--hero-wrap-columns);

align-items:center;

gap:
var(--hero-wrap-gap);

padding:
var(--hero-wrap-padding);

}


/* CHIP */

.hero-chip{

display:inline-flex;

align-items:center;

padding:
var(--hero-chip-padding);

background:
var(--hero-chip-bg);

border-left:
var(--hero-chip-border);

color:
var(--hero-chip-color);

font-size:
var(--hero-chip-size);

font-weight:
var(--hero-chip-weight);

letter-spacing:
var(--hero-chip-spacing);

margin-bottom:
var(--hero-chip-margin);

text-transform:uppercase;

}

/* TITLE */

.hero-left h1{

    font-size:var(--hero-title-size);

    line-height:var(--hero-title-line);

    letter-spacing:var(--hero-title-spacing);

    font-weight:var(--hero-title-weight);

    color:var(--hero-title-color);

    max-width:var(--hero-title-width);

    text-transform:var(--hero-title-transform);
}

/* ORANGE ACCENT */

.hero-left h1 span{

    color:var(--hero-title-accent);
}

/* TEXT */

.hero-left p{

    margin-top:var(--hero-text-margin);

    max-width:var(--hero-text-width);

    color:var(--hero-text-color);

    font-size:var(--hero-text-size);

    line-height:var(--hero-text-line);
}


/* =========================
   ACTIONS
========================= */

.hero-actions{

    display:flex;
    align-items:center;

    gap:var(--hero-actions-gap);

    margin-top:var(--hero-actions-margin);
}


/* BUTTON */

.main-btn{

    height:var(--hero-btn-height);

    padding:var(--hero-btn-padding);

    display:flex;
    align-items:center;
    justify-content:center;

    background:var(--hero-btn-bg);

    color:var(--hero-btn-color);

    font-size:var(--hero-btn-size);

    font-weight:var(--hero-btn-weight);

    text-transform:uppercase;

    letter-spacing:var(--hero-btn-spacing);

    clip-path:polygon(
        10px 0,
        100% 0,
        calc(100% - 10px) 100%,
        0 100%
    );

    box-shadow:var(--hero-btn-shadow);

    transition:var(--hero-btn-transition);
}

.main-btn:hover{

    transform:translateY(var(--hero-btn-hover));
}


/* SECONDARY */

.ghost-btn{

    height:var(--hero-ghost-height);

    padding:var(--hero-ghost-padding);

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid var(--hero-ghost-border);

    background:var(--hero-ghost-bg);

    color:var(--hero-ghost-color);

    font-size:var(--hero-ghost-size);

    font-weight:var(--hero-ghost-weight);

    clip-path:polygon(
        10px 0,
        100% 0,
        calc(100% - 10px) 100%,
        0 100%
    );

    transition:var(--hero-btn-transition);
}

.ghost-btn:hover{

    background:var(--hero-ghost-hover);

    transform:translateY(var(--hero-btn-hover));
}


/* =========================
   RIGHT SIDE
========================= */

.hero-right{

    position:relative;

    height:var(--hero-right-height);

    display:flex;
    align-items:center;
    justify-content:center;

    z-index:20;
}


/* MAIN IMAGE */

.main-card{

    position:relative;

    width:var(--hero-card-width);

    height:var(--hero-card-height);

    overflow:hidden;

    transform:
    skew(var(--hero-card-skew));

    clip-path:polygon(
        0 0,
        100% 0,
        100% 85%,
        84% 100%,
        0 100%
    );

    box-shadow:var(--hero-card-shadow);
}


/* IMAGE */

.main-card img{

    width:var(--hero-img-width);

    height:var(--hero-img-height);

    object-fit:cover;

    transform:
    skew(6deg)
    scale(var(--hero-img-scale));

    filter:
    brightness(var(--hero-img-brightness))
    contrast(var(--hero-img-contrast));

    transition:var(--hero-img-transition);
}

.main-card:hover img{

    transform:
    skew(6deg)
    scale(var(--hero-img-hover));
}


/* DARK OVERLAY */

.main-card::after{

    content:"";

    position:absolute;
    inset:0;

    background:var(--hero-overlay);
}


/* FLOATING PANELS */

.small-card{

    position:absolute;

    z-index:30;

    padding:var(--hero-float-padding);

    background:var(--hero-float-bg);

    border-left:var(--hero-float-border);

    box-shadow:var(--hero-float-shadow);

    animation:var(--hero-float-animation);
}

.small-card.top{

    top:var(--hero-float-top);

    left:var(--hero-float-left);
}

.small-card.bottom{

    right:var(--hero-float-right);

    bottom:var(--hero-float-bottom);

    animation-delay:var(--hero-float-delay);
}


/* NUMBERS */

.small-card span{

    display:block;

    font-size:var(--hero-float-number-size);

    font-weight:var(--hero-float-number-weight);

    color:var(--hero-float-number-color);

    margin-bottom:var(--hero-float-number-margin);
}

.small-card p{

    color:var(--hero-float-text-color);

    font-size:var(--hero-float-text-size);

    line-height:var(--hero-float-text-line);
}
/* ANIMATION */

@keyframes slideFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }
}

/* GOOGLE BADGE */

.small-card.google-badge{

    display:flex;
    align-items:center;
    justify-content:center;

    gap:var(--hero-google-gap);

    min-width:var(--hero-google-min-width);

    padding:var(--hero-google-padding);

    cursor:pointer;

    position:absolute;

    overflow:hidden;

    animation:var(--hero-google-animation);
}


/* ATTENTION ANIMATION */

@keyframes googleAttention{

    0%{
        box-shadow:
        0 0 0 rgba(159,216,176,0);
    }

    15%{
        box-shadow:
        0 0 0 rgba(159,216,176,0);
    }

    35%{
        box-shadow:
        0 0 25px rgba(159,216,176,0.45);
    }

    50%{
        box-shadow:
        0 0 8px rgba(159,216,176,0.15);
    }

    65%{
        box-shadow:
        0 0 28px rgba(159,216,176,0.5);
    }

    100%{
        box-shadow:
        0 0 0 rgba(159,216,176,0);
    }
}

/* SHINE EFFECT */

.small-card.google-badge::before{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:var(--hero-shine-width);
    height:100%;

    background:var(--hero-shine-bg);

    transform:skewX(-25deg);

    animation:var(--hero-shine-animation);
}


/* SHINE */

@keyframes shineMove{

    0%{
        left:-120%;
    }

    100%{
        left:160%;
    }
}


/* ICON */

.google-icon{

    width:var(--hero-google-icon-size);
    height:var(--hero-google-icon-size);

    object-fit:contain;
}


/* TEXT */

.small-card.google-badge span{

    font-size:var(--hero-google-text-size);
}


/* =========================
   SCROLL
========================= */

.bottom-scroll{

    position:absolute;

    bottom:24px;
    left:50%;

    transform:translateX(-50%);

    z-index:50;
}

.bottom-scroll span{

    display:block;

    width:var(--hero-scroll-width);
    height:var(--hero-scroll-height);

    background:var(--hero-scroll-bg);

    animation:var(--hero-scroll-animation);
}


/* ANIMATION */

@keyframes scrollAnim{

    0%{
        opacity:0;
        transform:translateY(-10px);
    }

    50%{
        opacity:1;
    }

    100%{
        opacity:0;
        transform:translateY(10px);
    }
}
/* LAPTOP */

@media(max-width:1400px){

.hero-left h1{

    font-size:var(--hero-laptop-title);

}

.main-card{

    width:var(--hero-laptop-card-w);
    height:var(--hero-laptop-card-h);

}

.hero-right{

    height:var(--hero-laptop-right-h);

}

}


/* TABLET */

@media(max-width:1100px){

.future-hero::after{

    width:var(--hero-tablet-after-w);
    height:var(--hero-tablet-after-h);

    top:auto;
    bottom:0;

    clip-path:var(--hero-tablet-clip);

}

.hero-wrap{

    grid-template-columns:1fr;

    gap:var(--hero-tablet-gap);

    padding-top:var(--hero-tablet-wrap-padding);

}

.hero-right{

    height:var(--hero-tablet-right-h);

}

.main-card{

    width:var(--hero-tablet-card-w);
    height:var(--hero-tablet-card-h);

}

.small-card.top{

    left:var(--hero-tablet-float-left);

}

.small-card.bottom{

    right:var(--hero-tablet-float-right);

}

}


/* MOBILE */

@media(max-width:768px){

.top-links{

    display:none;

}

.future-hero{

    padding:var(--hero-mobile-padding);

}

.hero-wrap{

    padding-top:var(--hero-mobile-wrap-top);
    padding-bottom:var(--hero-mobile-wrap-bottom);

}

.hero-left h1{

    font-size:var(--hero-mobile-title);
    line-height:var(--hero-mobile-title-line);

}

.hero-left p{

    font-size:var(--hero-mobile-text);
    line-height:var(--hero-mobile-text-line);

}

.hero-actions{

    flex-direction:var(--hero-mobile-actions-direction);
    align-items:var(--hero-mobile-actions-align);

}

.main-btn,
.ghost-btn{

    width:var(--hero-mobile-full-width);

}

.hero-right{

    height:var(--hero-mobile-right-h);

}

.main-card{

    width:var(--hero-mobile-card-w);
    height:var(--hero-mobile-card-h);

}

.small-card{

    padding:var(--hero-mobile-float-padding);

}

.small-card span{

    font-size:var(--hero-mobile-float-number);

}

.small-card.top{

    top:var(--hero-mobile-float-top);

}

.small-card.bottom{

    bottom:var(--hero-mobile-float-bottom);

}

}