*{
box-sizing:border-box;
}

:root{
--green:#1F4D3A;
--green-dark:#16392b;
--green-solid:#16392b;
--green-solid-2:#1F4D3A;
--green-soft:#eef5f0;
--green-mist:#f4f8f4;
--gold:#C9A227;
--brown:#5A4635;
--cream:#f7f3eb;
--white:#ffffff;
--text:#1f1f1f;
--shadow-soft:0 10px 30px rgba(0,0,0,0.08);
--shadow-gold:0 10px 30px rgba(201,162,39,0.18);
--hero-green-bg:linear-gradient(135deg,rgba(22,57,43,0.92),rgba(31,77,58,0.86)),radial-gradient(circle at top right,rgba(201,162,39,0.16),transparent 26%),radial-gradient(circle at bottom left,rgba(255,255,255,0.06),transparent 32%);
}

html{
scroll-behavior:smooth;
}

body{
margin:0;
font-family:Arial,Helvetica,sans-serif;
color:var(--text);
background:var(--white);
line-height:1.6;
}

a{
text-decoration:none;
}

header{
background:rgba(255,255,255,0.92);
border-bottom:1px solid #e7e2d8;
padding:18px 0;
position:sticky;
top:0;
z-index:1000;
backdrop-filter:blur(10px);
}

.wrap{
width:90%;
max-width:1120px;
margin:0 auto;
}

header .wrap{
display:flex;
justify-content:space-between;
align-items:center;
}

header h2{
margin:0;
color:var(--green);
font-size:22px;
letter-spacing:0.3px;
}

header nav a{
margin-left:18px;
color:var(--brown);
font-weight:600;
transition:color 0.25s ease;
}

header nav a:hover{
color:var(--green);
}

.hero{
position:relative;
overflow:hidden;
background:var(--hero-green-bg);
color:white;
padding:120px 20px 110px;
}

.hero::before,
.hero::after{
content:"";
position:absolute;
border-radius:50%;
filter:blur(8px);
animation:floatGlow 10s ease-in-out infinite;
}

.hero::before{
width:280px;
height:280px;
top:-90px;
right:-70px;
background:rgba(201,162,39,0.11);
}

.hero::after{
width:220px;
height:220px;
bottom:-70px;
left:-60px;
background:rgba(255,255,255,0.06);
animation-delay:2s;
}

.hero .wrap,
.section .wrap,
footer,
header .wrap{
position:relative;
z-index:2;
}

.hero-grid{
display:grid;
grid-template-columns:1.2fr 0.9fr;
gap:40px;
align-items:center;
}

.hero-copy{
position:relative;
z-index:2;
}

.hero-visual{
position:relative;
z-index:2;
}

.eyebrow{
color:var(--gold);
font-weight:700;
text-transform:uppercase;
letter-spacing:1.5px;
margin-bottom:14px;
font-size:13px;
animation:fadeUp 0.8s ease both;
}

.hero h1{
font-size:clamp(42px,7vw,70px);
line-height:1.06;
margin:0 0 18px;
max-width:780px;
animation:fadeUp 1s ease both;
}

.hero p{
font-size:18px;
max-width:760px;
margin:0 0 30px;
animation:fadeUp 1.2s ease both;
}

.hero-actions{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.btn{
display:inline-block;
padding:14px 26px;
margin:8px 12px 8px 0;
border-radius:999px;
font-weight:700;
border:2px solid transparent;
transition:all 0.28s ease;
animation:fadeUp 1.35s ease both;
}

.btn:hover{
transform:translateY(-3px);
}

.btn-primary{
background:var(--gold);
color:var(--green-dark);
box-shadow:var(--shadow-gold);
}

.btn-primary:hover{
box-shadow:0 16px 34px rgba(201,162,39,0.24);
}

.btn-secondary{
border-color:var(--gold);
color:var(--gold);
background:transparent;
}

.btn-secondary:hover{
background:rgba(201,162,39,0.08);
}

.btn-secondary-light{
border-color:#f0d98a;
color:#f0d98a;
}

.section{
padding:88px 20px;
position:relative;
}

.section-light{
background:var(--white);
}

.section-soft{
background:linear-gradient(to bottom,#eef5f0,#f7faf7);
}

.section-cream{
background:var(--cream);
}

.section h2{
font-size:clamp(30px,4vw,42px);
margin-top:0;
margin-bottom:18px;
color:var(--green);
line-height:1.15;
}

.section p{
font-size:18px;
max-width:860px;
}

.card-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:24px;
margin-top:36px;
}

.card{
background:rgba(255,255,255,0.96);
padding:26px;
border-radius:20px;
border-top:4px solid var(--gold);
box-shadow:var(--shadow-soft);
transition:transform 0.25s ease,box-shadow 0.25s ease;
}

.card:hover{
transform:translateY(-5px);
box-shadow:0 16px 34px rgba(0,0,0,0.10);
}

.card h3{
margin-top:0;
margin-bottom:10px;
color:var(--green);
}

.card-icon{
font-size:28px;
margin-bottom:10px;
font-weight:700;
color:var(--gold);
}

.cta{
background:
linear-gradient(rgba(22,57,43,0.95),rgba(22,57,43,0.95)),
radial-gradient(circle at center,rgba(201,162,39,0.08),transparent 40%);
color:white;
text-align:center;
overflow:hidden;
}

.cta h2{
color:white;
}

.cta p{
margin-left:auto;
margin-right:auto;
}

.garden-showcase{
background:rgba(255,255,255,0.1);
border:1px solid rgba(255,255,255,0.14);
border-radius:28px;
padding:30px;
box-shadow:0 18px 40px rgba(0,0,0,0.14);
backdrop-filter:blur(8px);
}

.garden-showcase h3{
margin-top:10px;
margin-bottom:12px;
font-size:28px;
line-height:1.2;
}

.garden-showcase p{
margin-bottom:22px;
}

.garden-badge{
display:inline-block;
padding:8px 14px;
border-radius:999px;
background:rgba(201,162,39,0.18);
color:#f4d472;
font-weight:700;
font-size:13px;
}

.tool-row{
display:flex;
flex-wrap:wrap;
gap:12px;
}

.tool-chip{
display:inline-flex;
align-items:center;
gap:8px;
padding:10px 14px;
border-radius:999px;
background:rgba(255,255,255,0.12);
font-weight:600;
}

.garden-strip{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:20px;
margin-top:34px;
}

.five-boxes{
grid-template-columns:repeat(5,1fr);
}

.garden-step{
background:#f8fbf8;
border:1px solid rgba(31,77,58,0.08);
border-radius:20px;
padding:24px;
box-shadow:0 10px 24px rgba(0,0,0,0.05);
}

.garden-step h3{
margin:10px 0 8px;
color:#1F4D3A;
}

.garden-icon{
font-size:30px;
display:inline-block;
font-weight:700;
color:var(--gold);
}

.learn-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:18px;
margin:30px 0 26px;
}

.learn-box{
background:rgba(255,255,255,0.75);
border:1px solid rgba(31,77,58,0.08);
border-radius:18px;
padding:20px 18px;
text-align:center;
}

.learn-box span{
display:block;
font-size:30px;
margin-bottom:10px;
font-weight:700;
color:var(--gold);
}

.learn-box p{
margin:0;
font-size:15px;
}

footer{
text-align:center;
padding:24px 20px;
border-top:1px solid #e7e2d8;
color:var(--brown);
background:white;
}

/* INTRO */
.intro-screen{
position:fixed;
inset:0;
z-index:99999;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
background:
linear-gradient(135deg,#16392b 0%,#1F4D3A 100%),
radial-gradient(circle at top right,rgba(201,162,39,0.16),transparent 26%),
radial-gradient(circle at bottom left,rgba(255,255,255,0.06),transparent 32%);
opacity:1;
visibility:visible;
}

.intro-screen::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at top right,rgba(201,162,39,0.08),transparent 24%),
radial-gradient(circle at bottom left,rgba(255,255,255,0.04),transparent 28%);
pointer-events:none;
}

.intro-screen.intro-exit{
animation:introExit 1.4s ease forwards;
}

.intro-overlay{
position:absolute;
inset:0;
background:linear-gradient(to top, rgba(0,0,0,0.06), rgba(255,255,255,0));
pointer-events:none;
z-index:1;
}

.intro-words{
position:absolute;
inset:0;
z-index:6;
pointer-events:none;
}

.intro-word{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
font-size:20px;
font-weight:600;
letter-spacing:1px;
text-transform:lowercase;
color:rgba(255,255,255,0);
opacity:0;
white-space:nowrap;
z-index:6;
animation-duration:8.4s;
animation-timing-function:ease-in-out;
animation-fill-mode:forwards;
animation-iteration-count:1;
}

.w1{left:10%;top:12%;animation-name:wordDrop;animation-delay:0s;}
.w2{left:18%;top:30%;animation-name:wordDrop;animation-delay:1.2s;}
.w3{left:40%;top:22%;animation-name:wordDrop;animation-delay:2.4s;}
.w4{left:68%;top:16%;animation-name:wordDrop;animation-delay:3.6s;}
.w5{left:82%;top:30%;animation-name:wordDrop;animation-delay:4.8s;}
.w6{left:14%;top:56%;animation-name:wordDrop;animation-delay:6s;}
.w7{left:34%;top:70%;animation-name:wordDrop;animation-delay:7.2s;}
.w8{left:56%;top:62%;animation-name:wordDrop;animation-delay:8.4s;}
.w9{left:78%;top:74%;animation-name:wordDrop;animation-delay:9.6s;}
.w10{left:24%;top:20%;animation-name:wordDrop;animation-delay:10.8s;}
.w11{left:52%;top:14%;animation-name:wordDrop;animation-delay:12s;}
.w12{left:72%;top:48%;animation-name:wordDrop;animation-delay:13.2s;}
.w13{left:12%;top:78%;animation-name:wordDrop;animation-delay:14.4s;}
.w14{left:28%;top:44%;animation-name:wordDrop;animation-delay:15.6s;}
.w15{left:48%;top:78%;animation-name:wordDrop;animation-delay:16.8s;}
.w16{left:64%;top:38%;animation-name:wordDrop;animation-delay:18s;}
.w17{left:84%;top:58%;animation-name:wordDrop;animation-delay:19.2s;}
.w18{left:20%;top:64%;animation-name:wordDrop;animation-delay:20.4s;}
.w19{left:44%;top:34%;animation-name:wordDrop;animation-delay:21.6s;}
.w20{left:60%;top:84%;animation-name:wordDrop;animation-delay:22.8s;}
.w21{left:76%;top:22%;animation-name:wordDrop;animation-delay:24s;}
.w22{left:8%;top:40%;animation-name:wordDrop;animation-delay:25.2s;}
.w23{left:36%;top:52%;animation-name:wordDrop;animation-delay:26.4s;}
.w24{left:88%;top:44%;animation-name:wordDrop;animation-delay:27.6s;}

.intro-center{
position:relative;
z-index:20;
width:min(90vw,900px);
height:360px;
display:flex;
align-items:center;
justify-content:center;
}

.intro-title-text{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
color:#ffffff;
font-size:clamp(34px,4vw,62px);
font-weight:700;
text-align:center;
text-shadow:0 0 24px rgba(201,162,39,0.18);
opacity:0;
animation:titleReveal 1.2s ease 1.2s forwards, titleToSeal 1.2s ease 30.8s forwards;
white-space:nowrap;
z-index:22;
}

.intro-seal-wrap{
position:absolute;
left:50%;
top:50%;
transform:translate(-50%,-46%) scale(0.3);
opacity:0;
z-index:21;
animation:sealReveal 2.2s ease 31s forwards;
}

.intro-seal-image{
display:block;
width:min(280px,42vw);
height:auto;
filter:drop-shadow(0 18px 30px rgba(0,0,0,0.26));
}

@keyframes wordDrop{
0%{
opacity:0;
color:rgba(255,255,255,0);
transform:translate(-50%,-50%) scale(0.95);
}
10%{
opacity:1;
color:rgba(255,255,255,0.26);
transform:translate(-50%,-50%) scale(1);
}
32%{
opacity:1;
color:rgba(255,255,255,0.26);
transform:translate(-50%,-50%) scale(1);
}
72%{
left:50%;
top:50%;
opacity:0.14;
color:rgba(255,255,255,0.14);
transform:translate(-50%,-50%) scale(0.9);
}
100%{
left:50%;
top:58%;
opacity:0;
color:rgba(255,255,255,0);
transform:translate(-50%,-50%) scale(0.72);
}
}

@keyframes titleReveal{
0%{
opacity:0;
transform:translate(-50%,-50%) scale(0.97);
}
100%{
opacity:1;
transform:translate(-50%,-50%) scale(1);
}
}

@keyframes titleToSeal{
0%{
opacity:1;
transform:translate(-50%,-50%) scale(1);
filter:blur(0px);
}
100%{
opacity:0;
transform:translate(-50%,-50%) scale(0.82);
filter:blur(6px);
}
}

@keyframes sealReveal{
0%{
opacity:0;
transform:translate(-50%,-46%) scale(0.3);
filter:blur(8px);
}
40%{
opacity:1;
transform:translate(-50%,-46%) scale(1.04);
filter:blur(0px);
}
100%{
opacity:1;
transform:translate(-50%,-46%) scale(1);
filter:blur(0px);
}
}

@keyframes fadeUp{
from{
opacity:0;
transform:translateY(18px);
}
to{
opacity:1;
transform:translateY(0);
}
}

@keyframes floatGlow{
0%,100%{
transform:translateY(0px) scale(1);
}
50%{
transform:translateY(16px) scale(1.04);
}
}

@keyframes introExit{
0%{
opacity:1;
transform:scale(1);
filter:blur(0px);
}
100%{
opacity:0;
transform:scale(1.01);
filter:blur(2px);
visibility:hidden;
pointer-events:none;
}
}

@media (max-width:900px){
.card-grid,
.hero-grid,
.learn-grid{
grid-template-columns:1fr 1fr;
}

.five-boxes{
grid-template-columns:1fr 1fr 1fr;
}

.intro-title-text{
white-space:normal;
max-width:85%;
line-height:1.08;
}

.intro-seal-image{
width:min(240px,46vw);
}
}

@media (max-width:700px){
header .wrap{
flex-direction:column;
gap:12px;
}

header nav a{
margin:0 8px;
}

.hero{
padding:100px 20px 90px;
}

.hero h1{
font-size:40px;
}

.card-grid,
.hero-grid,
.garden-strip,
.learn-grid,
.five-boxes{
grid-template-columns:1fr;
}

.btn{
width:100%;
text-align:center;
margin-right:0;
}

.intro-word{
font-size:14px;
}

.intro-title-text{
white-space:normal;
max-width:88%;
line-height:1.08;
}

.intro-seal-image{
width:min(180px,52vw);
}
}