:root{
    --green-dark:#0B3D2E;
    --green-main:#0F5132;
    --green-light:#198754;
    --gold:#D4AF37;
    --surface:rgba(255,255,255,.06);
    --border:rgba(255,255,255,.12);
}

*{margin:0;padding:0;box-sizing:border-box;}

body{
    font-family:'Inter',system-ui,sans-serif;
    background:var(--green-dark);
    color:white;
    line-height:1.6;
    min-height:100vh;
}

a{color:inherit;}

.header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    flex-wrap:wrap;
    padding:18px 10%;
    background:var(--green-main);
}

.header-nav{
    display:flex;
    align-items:center;
    gap:14px 22px;
    flex-wrap:wrap;
    font-size:.95rem;
}

.header-nav a{
    text-decoration:none;
    opacity:.92;
    transition:opacity .2s, color .2s;
}

.header-nav a:hover{opacity:1;color:var(--gold);}

.header-nav .session{
    opacity:.75;
    font-size:.85rem;
    max-width:220px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.lang-switch{display:flex;align-items:center;gap:14px;}
.lang-switch a{transition:transform .2s;}
.lang-switch img{width:28px;border-radius:4px;}
.lang-switch a:hover{transform:scale(1.12);}

.badge-demo{
    display:inline-block;
    padding:4px 10px;
    border-radius:999px;
    font-size:.72rem;
    letter-spacing:.06em;
    text-transform:uppercase;
    background:rgba(212,175,55,.2);
    color:var(--gold);
    border:1px solid rgba(212,175,55,.35);
}

.hero{
    position:relative;
    min-height:92vh;
    background-image:url('/img/profile.jpg');
    background-size:cover;
    background-position:center 5%;
    background-attachment:fixed;
    display:flex;
    align-items:flex-end;
    padding:0 12% 140px 12%;
    overflow:hidden;
}

.hero::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to bottom,
        rgba(0,0,0,0) 55%,
        rgba(0,0,0,.45) 82%,
        rgba(0,0,0,.82) 100%
    );
}

.hero::after{
    content:"KETSA";
    position:absolute;
    top:12%;
    left:50%;
    transform:translateX(-50%);
    font-family:'Playfair Display',Georgia,serif;
    font-size:16vw;
    font-weight:700;
    letter-spacing:12px;
    color:rgba(255,255,255,.05);
    pointer-events:none;
}

.hero-content{position:relative;max-width:640px;z-index:2;}

.hero h1{
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(1.85rem,4vw,3.1rem);
    line-height:1.15;
}

.gold-line{
    width:100px;
    height:3px;
    background:var(--gold);
    margin:28px 0;
}

.hero p{font-size:1.08rem;opacity:.95;}

.scroll-indicator{
    position:absolute;
    bottom:26px;
    left:50%;
    transform:translateX(-50%);
    width:24px;
    height:40px;
    border:2px solid white;
    border-radius:20px;
}

.scroll-indicator::before{
    content:"";
    position:absolute;
    top:8px;
    left:50%;
    transform:translateX(-50%);
    width:4px;
    height:8px;
    background:white;
    border-radius:2px;
    animation:scroll 2s infinite;
}

@keyframes scroll{
    0%{opacity:1;transform:translate(-50%,0);}
    100%{opacity:0;transform:translate(-50%,15px);}
}

section{padding:100px 10%;}

.page-hero{padding-top:48px;padding-bottom:72px;}

.page-hero h1{
    font-family:'Playfair Display',Georgia,serif;
    font-size:clamp(1.75rem,3.4vw,2.5rem);
    margin-bottom:14px;
}

.page-hero p.sub{opacity:.9;max-width:640px;}

.gradient-text{
    background:linear-gradient(90deg,#1F8F4E,#D4AF37,#B02A37);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.about{background:var(--green-main);}
.about-inner{max-width:750px;}
.about h2{font-family:'Playfair Display',Georgia,serif;font-size:2.2rem;}

.services{background:var(--green-light);}
.services h2{
    font-family:'Playfair Display',Georgia,serif;
    font-size:2rem;
    margin-bottom:48px;
}

.service-item{
    display:flex;
    gap:22px;
    margin-bottom:48px;
    max-width:820px;
}

.service-icon{width:48px;height:48px;color:var(--gold);flex-shrink:0;}
.service-icon svg{width:100%;height:100%;}
.service-text h3{color:var(--gold);margin-bottom:10px;}

.cta{
    background:linear-gradient(135deg,var(--green-main),#145A32);
    text-align:center;
}
.cta-inner{max-width:700px;margin:0 auto;}
.cta h2{font-family:'Playfair Display',Georgia,serif;font-size:2rem;}

.btn{
    display:inline-block;
    margin-top:28px;
    padding:14px 40px;
    background:var(--gold);
    color:#0a0a0a;
    text-decoration:none;
    border-radius:40px;
    font-weight:600;
    border:none;
    cursor:pointer;
    font-size:1rem;
    transition:background .2s, transform .2s;
}

.btn:hover{background:white;transform:translateY(-2px);}
.btn-secondary{
    background:transparent;
    color:white;
    border:1px solid var(--border);
}
.btn-secondary:hover{background:rgba(255,255,255,.08);color:white;}

.footer{
    background:#052E21;
    padding:52px 10%;
    text-align:center;
}

.footer-flags a{margin:0 12px;transition:transform .2s;}
.footer-flags img{width:32px;border-radius:4px;}
.footer-flags a:hover{transform:scale(1.15);}

.footer-legal{margin-top:22px;}
.footer-legal a{color:#ccc;text-decoration:none;}
.footer-legal a:hover{color:white;}

.panel{
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:16px;
    padding:28px 26px;
    max-width:520px;
}

.panel.wide{max-width:900px;}

.form-row{margin-bottom:18px;}
.form-row label{display:block;font-size:.88rem;opacity:.85;margin-bottom:6px;}

input[type="email"],
input[type="password"],
input[type="date"],
input[type="text"]{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
    border:1px solid var(--border);
    background:rgba(0,0,0,.25);
    color:white;
    font:inherit;
}

input:focus{outline:2px solid rgba(212,175,55,.45);}

.mock-paypal{
    background:linear-gradient(180deg,#003087 0%,#001f5c 100%);
    border-radius:16px;
    padding:28px;
    border:1px solid rgba(255,255,255,.15);
}

.mock-paypal .pp-logo{
    font-weight:700;
    letter-spacing:.02em;
    font-size:1.35rem;
    margin-bottom:18px;
}

.mock-paypal .pp-row{
    display:flex;
    justify-content:space-between;
    padding:10px 0;
    border-bottom:1px solid rgba(255,255,255,.12);
    font-size:.95rem;
}

.mock-paypal .pp-note{
    margin-top:16px;
    font-size:.85rem;
    opacity:.85;
}

.video-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
    gap:20px;
    margin-top:28px;
}

.video-card{
    position:relative;
    border-radius:14px;
    overflow:hidden;
    border:1px solid var(--border);
    background:rgba(0,0,0,.2);
}

.video-card .ratio{
    aspect-ratio:16/9;
    background:linear-gradient(135deg,#0d3d2a,#145a32 50%,#1a1a1a);
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Playfair Display',Georgia,serif;
    font-size:1.15rem;
}

.video-card .meta{padding:12px 14px;font-size:.9rem;}
.video-card .lock{
    position:absolute;
    top:10px;right:10px;
    background:rgba(0,0,0,.55);
    padding:4px 10px;
    border-radius:999px;
    font-size:.72rem;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.member-layout{display:grid;gap:32px;}
@media(min-width:900px){
    .member-layout{grid-template-columns:200px 1fr;}
}

.member-side-nav{
    display:flex;
    flex-direction:column;
    gap:8px;
}

.member-side-nav a{
    text-decoration:none;
    padding:10px 14px;
    border-radius:10px;
    border:1px solid transparent;
    opacity:.9;
}

.member-side-nav a:hover{background:rgba(255,255,255,.06);}
.member-side-nav a.active{
    border-color:rgba(212,175,55,.4);
    background:rgba(212,175,55,.1);
    color:var(--gold);
}

.member-section{
    scroll-margin-top:24px;
    padding-bottom:8px;
}

.member-section h2{
    font-family:'Playfair Display',Georgia,serif;
    font-size:1.5rem;
    margin-bottom:10px;
}

.stack{max-width:720px;}

@media(max-width:768px){
    .hero{background-attachment:scroll;padding:0 8% 110px 8%;}
    section{padding:72px 8%;}
    .header{padding:16px 8%;}
    .service-item{flex-direction:column;}
    .lang-switch img{width:24px;}
}
