﻿@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600;700&family=Inter:wght@300;400;500;600;700;800&display=swap');

:root{
    --green:#073D35;
    --green-dark:#042A24;
    --gold:#B88935;
    --cream:#F8F1E6;
    --ivory:#FFFDF8;
    --beige:#EBDDC7;
    --text:#283633;
    --muted:#5F625F;
    --line:rgba(184,137,53,.38);
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;
    background:linear-gradient(135deg,#FFFDF8,#F8F1E6);
    color:var(--text);
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

.landing-page{
    min-height:100vh;
    display:grid;
    grid-template-columns:31% 69%;
}

/* LEFT PANEL */

.landing-left{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 28px;
    background:
        radial-gradient(circle at 50% 35%,rgba(255,255,255,.08),transparent 30%),
        linear-gradient(160deg,#073D35,#042A24);
    border-right:1px solid rgba(184,137,53,.5);
    overflow:hidden;
}

.left-frame{
    position:absolute;
    inset:25px;
    border:1px solid rgba(184,137,53,.8);
    border-radius:36px;
}

.left-frame:before,
.left-frame:after{
    content:'✦';
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    color:var(--gold);
    font-size:24px;
   background:#073D35;
    padding:0 14px;
}

.left-frame:before{
    top:-15px;
}

.left-frame:after{
    bottom:-15px;
}

.brand-box{
    position:relative;
    z-index:3;
    text-align:center;
    animation:fadeUp .8s ease both;
}

.main-logo{
    width:220px;
    height:220px;
    object-fit:contain;
    margin-bottom:28px;
    opacity:1;
    filter:drop-shadow(0 22px 35px rgba(0,0,0,.28));
    animation:softFloat 5.5s ease-in-out infinite;
}

.brand-box h1{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(52px,5vw,82px);
    letter-spacing:19px;
    color:#FFF7EA;
    margin-left:18px;
    line-height:1;
}

.brand-subtitle{
    margin-top:18px;
    font-size:18px;
    font-weight:800;
    letter-spacing:10px;
    color:#FFF7EA;
}

.small-divider{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin:30px auto 26px;
}

.small-divider span{
    width:110px;
    height:1px;
    background:var(--gold);
}

.small-divider i{
    color:var(--gold);
    font-size:22px;
}

.tagline{
    font-size:16px;
    font-weight:700;
    letter-spacing:10px;
    color:var(--gold);
    margin-left:8px;
}

.left-bottom-note{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    min-height:145px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:34px 48px 28px;
    background:linear-gradient(135deg,var(--green),var(--green-dark));
    color:white;
    border-top:1px solid rgba(184,137,53,.55);
    clip-path:ellipse(88% 100% at 50% 100%);
}

.left-bottom-note i{
    color:#D8B977;
    font-size:27px;
    margin-bottom:13px;
}

.left-bottom-note p{
    max-width:310px;
    font-family:'Cormorant Garamond',serif;
    font-size:24px;
    line-height:1.35;
    color:#FFF7EA;
}

.leaf-deco{
    position:absolute;
    width:190px;
    height:210px;
    opacity:.42;
}

.leaf-top{
    top:25px;
    left:-28px;
}

.leaf-bottom{
    bottom:105px;
    left:-22px;
    transform:rotate(18deg);
}

.leaf-deco:before{
    content:'';
    position:absolute;
    width:2px;
    height:180px;
    left:80px;
    top:8px;
    background:rgba(91,120,85,.38);
    border-radius:20px;
    transform:rotate(32deg);
}

.leaf-deco:after{
    content:'';
    position:absolute;
    width:120px;
    height:120px;
    left:45px;
    top:35px;
    background:
        radial-gradient(ellipse at 35% 20%,rgba(91,120,85,.28) 0 20%,transparent 21%),
        radial-gradient(ellipse at 75% 38%,rgba(91,120,85,.24) 0 21%,transparent 22%),
        radial-gradient(ellipse at 25% 58%,rgba(91,120,85,.22) 0 22%,transparent 23%),
        radial-gradient(ellipse at 75% 76%,rgba(91,120,85,.20) 0 20%,transparent 21%);
}

/* RIGHT PANEL */

.landing-right{
    min-height:100vh;
    position:relative;
    display:flex;
    align-items:center;
    padding:64px 7vw;
    background:
        radial-gradient(circle at 80% 22%,rgba(235,221,199,.45),transparent 26%),
        radial-gradient(circle at 34% 0%,rgba(255,255,255,.95),transparent 35%),
        linear-gradient(145deg,#FFFDF8,#F8F1E6 76%,#F2E3CE);
    overflow:hidden;
}

.right-bg-circle{
    position:absolute;
    width:630px;
    height:630px;
    border:1.4px solid rgba(184,137,53,.55);
    border-radius:50%;
    right:-335px;
    top:120px;
    z-index:1;
}

.right-bg-circle:before{
    content:'✦';
    position:absolute;
    left:78px;
    top:135px;
    color:var(--gold);
    font-size:42px;
}

.right-leaves{
    position:absolute;
    right:-10px;
    top:135px;
    width:360px;
    height:590px;
    opacity:.55;
    z-index:2;
}

.right-leaves:before{
    content:'';
    position:absolute;
    left:140px;
    top:0;
    width:2px;
    height:520px;
    background:rgba(80,115,76,.42);
    border-radius:20px;
    transform:rotate(11deg);
}

.right-leaves:after{
    content:'';
    position:absolute;
    inset:0;
    background:
        radial-gradient(ellipse at 24% 18%,rgba(94,125,86,.34) 0 8%,transparent 9%),
        radial-gradient(ellipse at 60% 26%,rgba(94,125,86,.30) 0 9%,transparent 10%),
        radial-gradient(ellipse at 29% 43%,rgba(94,125,86,.31) 0 10%,transparent 11%),
        radial-gradient(ellipse at 67% 53%,rgba(94,125,86,.28) 0 10%,transparent 11%),
        radial-gradient(ellipse at 30% 69%,rgba(94,125,86,.25) 0 9%,transparent 10%),
        radial-gradient(ellipse at 69% 77%,rgba(94,125,86,.23) 0 9%,transparent 10%);
}

.hero-content{
    position:relative;
    z-index:5;
    max-width:1030px;
    animation:fadeUp .8s ease .12s both;
}

.welcome-text{
    display:inline-flex;
    align-items:center;
    gap:15px;
    margin-bottom:25px;
    color:var(--gold);
    font-size:14px;
    font-weight:800;
    letter-spacing:4px;
}

.hero-content h2{
    font-family:'Cormorant Garamond',serif;
    color:var(--green);
    font-size:clamp(70px,7.8vw,132px);
    line-height:.92;
    letter-spacing:-2px;
    margin-bottom:24px;
    text-shadow:0 18px 34px rgba(7,61,53,.10);
}

.hero-content h2 strong{
    color:var(--gold);
}

.hero-line{
    width:128px;
    height:2px;
    background:var(--gold);
    margin-bottom:30px;
}

.hero-desc{
    max-width:680px;
    color:#505856;
    font-size:22px;
    line-height:1.72;
    margin-bottom:38px;
}

.hero-desc span{
    color:var(--gold);
    font-weight:800;
}

.feature-row{
    max-width:850px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:42px;
}

.feature-item{
    text-align:center;
    padding:8px 8px 0;
}

.feature-icon{
    width:74px;
    height:74px;
    margin:0 auto 15px;
    display:grid;
    place-items:center;
    border-radius:50%;
    color:var(--green);
    font-size:34px;
    background:rgba(255,253,248,.65);
    border:1px solid rgba(184,137,53,.28);
    box-shadow:0 16px 34px rgba(7,61,53,.08);
}

.feature-item h3{
    font-family:'Cormorant Garamond',serif;
    font-size:25px;
    color:var(--green);
    line-height:1.15;
    margin-bottom:12px;
}

.feature-item p{
    color:#59605E;
    font-size:14px;
    line-height:1.65;
}

.hero-buttons{
    display:flex;
    gap:28px;
    align-items:center;
    margin-bottom:42px;
}

.btn-primary,
.btn-secondary{
    min-width:295px;
    height:66px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    border-radius:8px;
    text-transform:uppercase;
    font-size:15px;
    font-weight:800;
    letter-spacing:1.1px;
    transition:.35s ease;
}

.btn-primary{
    color:white;
    background:linear-gradient(135deg,var(--green),var(--green-dark));
    border:1px solid rgba(184,137,53,.7);
    box-shadow:0 18px 38px rgba(7,61,53,.28);
}          

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

.btn-secondary{
    color:var(--green);
    background:rgba(255,253,248,.45);
    border:1px solid var(--green);
}

.btn-secondary:hover{
    background:var(--green);
    color:white;
    transform:translateY(-5px);
}

.stats-box{
    max-width:1020px;
    display:grid;
    grid-template-columns:1fr auto 1fr auto 1.2fr;
    align-items:center;
    gap:28px;
    padding:28px 36px;
    border-radius:16px;
    background:rgba(255,253,248,.72);
    border:1px solid rgba(184,137,53,.35);
    box-shadow:0 25px 70px rgba(7,61,53,.12);
    backdrop-filter:blur(16px);
}

.stats-box > span{
    width:1px;
    height:66px;
    background:rgba(184,137,53,.36);
}

.stat-item{
    display:flex;
    align-items:center;
    gap:20px;
}

.stat-item i{
    width:58px;
    height:58px;
    min-width:58px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(248,241,230,.9);
    border:1px solid rgba(184,137,53,.24);
    color:var(--green);
    font-size:28px;
}

.stat-item h4{
    font-family:'Cormorant Garamond',serif;
    color:var(--green);
    font-size:38px;
    line-height:1;
    margin-bottom:5px;
}

.stat-item p{
    text-transform:uppercase;
    color:#59605E;
    font-size:12px;
    letter-spacing:.7px;
    line-height:1.5;
}

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

@keyframes softFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
}

@media(max-width:1280px){
    .landing-page{grid-template-columns:34% 66%;}
    .landing-right{padding:58px 5vw;}
    .hero-content h2{font-size:clamp(62px,7.5vw,108px);}
    .feature-row{grid-template-columns:repeat(2,1fr);max-width:620px;}
    .stats-box{grid-template-columns:1fr;gap:18px;}
    .stats-box > span{display:none;}
    .right-leaves,.right-bg-circle{opacity:.24;}
}

@media(max-width:960px){
    .landing-page{grid-template-columns:1fr;}
    .landing-left{min-height:auto;padding:78px 24px 190px;}
    .left-frame{inset:18px;}
    .main-logo{
    width:165px;
    height:165px;
    margin-bottom:30px;
}
    .brand-box h1{font-size:56px;letter-spacing:14px;}
    .brand-subtitle{letter-spacing:7px;font-size:15px;}
    .left-bottom-note{min-height:125px;clip-path:none;}
    .landing-right{min-height:auto;padding:74px 24px;}
    .hero-content h2{font-size:66px;}
    .hero-buttons{flex-direction:column;align-items:stretch;}
    .btn-primary,.btn-secondary{width:100%;min-width:0;}
}

@media(max-width:620px){
    .landing-left{padding:68px 18px 165px;}
    .brand-box h1{font-size:42px;letter-spacing:9px;margin-left:8px;}
    .brand-subtitle{font-size:13px;letter-spacing:5px;}
    .tagline{font-size:12px;letter-spacing:5px;}
    .small-divider span{width:70px;}
    .left-bottom-note p{font-size:20px;}
    .landing-right{padding:58px 18px;}
    .welcome-text{font-size:12px;letter-spacing:3px;gap:8px;}
    .hero-content h2{font-size:52px;}
    .hero-desc{font-size:17px;}
    .feature-row{grid-template-columns:1fr;}
    .feature-item{
        background:rgba(255,253,248,.45);
        border:1px solid rgba(184,137,53,.18);
        border-radius:20px;
        padding:22px 18px;
    }
    .btn-primary,.btn-secondary{height:60px;font-size:13px;}
    .stats-box{padding:24px 18px;}
    .stat-item{align-items:flex-start;}
    .stat-item h4{font-size:31px;}
}
.leaf-deco,
.right-leaves,
.right-bg-circle{
    display:none;
}