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

.cs-hero{

    position:relative;

    min-height:auto;

    padding:
    120px 70px
    80px;

    overflow:hidden;

    background:
    linear-gradient(
    180deg,
    #FDFBEF 0%,
    #FDFBEF 100%);

}

/* ========================= */
/* LIGHTS */
/* ========================= */

.hero-light{

    position:absolute;

    border-radius:50%;

    filter:blur(80px);

    opacity:0.25;

}

.hero-light-1{

    width:400px;
    height:400px;

    background:#FBAF47;

    top:-100px;
    right:-100px;

}

.hero-light-2{

    width:300px;
    height:300px;

    background:#A3C45C;

    bottom:0;
    left:-100px;

}

/* ========================= */
/* FLOATING PANELS */
/* ========================= */
.floating-panels{

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    pointer-events:none;

}
/* PANEL */
.panel{

    position:absolute;

    padding:
    10px 14px;

    border-radius:16px;

    background:
    rgba(46,74,35,0.06);

    border:
    1px solid rgba(46,74,35,0.08);

    backdrop-filter:blur(10px);

    color:#2E4A23;

    display:flex;
    align-items:center;
    gap:8px;

    font-size:0.78rem;
    font-weight:600;

    animation:
    floatPanel 6s ease-in-out infinite;

    white-space:nowrap;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.15);

}

/* PANEL ICON */

.panel i{

    color:#FBAF47;

}

/* POSITIONS */
/* ========================= */
/* PANEL POSITIONS */
/* ========================= */

.panel{

    z-index:8;

}

/* TOP LEFT */

.panel-1{

    top:14%;
    left:-8%;

}

/* TOP RIGHT */

.panel-2{

    top:8%;
    right:-6%;

    animation-delay:1s;

}

/* BOTTOM LEFT */

.panel-3{

    bottom:16%;
    left:-10%;

    animation-delay:2s;

}

/* BOTTOM RIGHT */

.panel-4{

    bottom:12%;
    right:-8%;

    animation-delay:3s;

}

/* ========================= */
/* CONTAINER */
/* ========================= */

.hero-container{

    max-width:1280px;
    margin:auto;
    position:relative;

    z-index:2;

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

    gap:60px;

}

/* ========================= */
/* LEFT */
/* ========================= */

.hero-left{

    width:55%;

}

/* MINI TAG */

.hero-mini-tag{

    width:max-content;

    padding:
    10px 18px;

    border-radius:999px;

    background:
    rgba(46,74,35,0.05);

    border:
    1px solid rgba(46,74,35,0.08);

    color:#FBAF47;

    display:flex;
    align-items:center;
    gap:10px;

    font-size:0.82rem;
    font-weight:700;

    margin-bottom:28px;

}

/* DOT */

.tag-dot{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#FBAF47;

    animation:
    pulseDot 1.8s ease infinite;

}

/* TITLE */
.hero-title{

    font-size:2.7rem;

    line-height:1.02;

    font-weight:700;

    letter-spacing:-3px;

    color:#2E4A23;

    margin-bottom:22px;

    max-width:620px;

}

/* HIGHLIGHT */

.hero-title span{

    color:#FBAF47;

    position:relative;

}

/* DESC */
.hero-description{

    max-width:520px;

    font-size:1rem;

    line-height:1.9;

    color:
    rgba(46,74,35,0.72);

    margin-bottom:32px;

    font-weight:300;

}

/* BUTTONS */

.hero-buttons{

    display:flex;
    align-items:center;
    gap:18px;

    flex-wrap:wrap;

    margin-bottom:50px;

}

/* BTN */
.hero-btn{

    position:relative;

    height:44px;

    padding:
    0 18px;

    border-radius:16px;

    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;

    overflow:hidden;

    font-size:0.88rem;
    font-weight:600;

    transition:0.35s ease;

}

/* ICON */
.btn-icon{

    width:30px;
    height:30px;

    border-radius:10px;

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

    background:
    rgba(46,74,35,0.14);

    font-size:0.8rem;

}
/* PRIMARY */

.primary-btn{

    background:
    linear-gradient(
    135deg,
    #FBAF47,
    #FFCB7D);

    color:#2E4A23;

    box-shadow:
    0 14px 40px rgba(251,175,71,0.20);

}

/* PRIMARY HOVER */

.primary-btn:hover{

    transform:
    translateY(-4px)
    scale(1.03);

}

/* SECONDARY */

.secondary-btn{

    background:
    rgba(46,74,35,0.05);

    border:
    1px solid rgba(46,74,35,0.08);

    color:#2E4A23;

    backdrop-filter:blur(10px);

}

/* SECONDARY HOVER */

.secondary-btn:hover{

    background:
    rgba(46,74,35,0.08);

}

/* STATS */

.hero-stats{

    display:flex;
    align-items:center;
    gap:18px;

    flex-wrap:wrap;

}

/* STAT */
.stat-box{

    min-width:130px;

    padding:
    16px 18px;

    border-radius:18px;

    background:
    rgba(46,74,35,0.05);

    border:
    1px solid rgba(46,74,35,0.08);

    backdrop-filter:blur(12px);

}
/* STAT H3 */

.stat-box h3{

    font-size:1.5rem;

    color:#FBAF47;

    margin-bottom:8px;

}

/* STAT P */

.stat-box p{

    color:
    rgba(46,74,35,0.7);

    font-size:0.82rem;

}

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

.hero-right{

    width:45%;

    display:flex;
    justify-content:center;

}

/* IMAGE WRAPPER */
.hero-image-wrapper{

    position:relative;

    width:420px;
    height:520px;

}
/* IMAGE BOX */

.hero-image-box{

    position:relative;

    width:100%;
    height:100%;

    border-radius:32px; 
    overflow:hidden;

    border:
    1px solid rgba(46,74,35,0.08);

    background:#EAF1DA;

    box-shadow:
    0 20px 80px rgba(0,0,0,0.35);

}

/* COMIC FRAME */

.comic-frame{

    position:absolute;

    inset:-12px;

    border-radius:50px;

    border:
    2px dashed rgba(251,175,71,0.3);

    animation:
    rotateFrame 14s linear infinite;

}

/* IMAGE */

.hero-img{

    position:absolute;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:1s ease;

}

/* NORMAL */

.normal-img{

    animation:
    normalFade 8s infinite;

}

/* COMIC */

.comic-img{

    opacity:0;

    animation:
    comicFade 8s infinite;

}

/* FLOAT CARD */
.floating-card{

    position:absolute;

    padding:
    12px 14px;

    border-radius:16px;

    background:
    rgba(46,74,35,0.06);

    border:
    1px solid rgba(46,74,35,0.08);

    backdrop-filter:blur(10px);

    color:#2E4A23;

    display:flex;
    align-items:center;
    gap:8px;

    z-index:5;

    animation:
    floatCard 5s ease-in-out infinite;

    font-size:0.82rem;
    font-weight:500;

}

/* CARD ICON */

.floating-card i{

    color:#FBAF47;

}

/* CARD POSITION */

.card-1{

    top:10%;
    left:-12%;

}

.card-2{

    bottom:12%;
    right:-12%;

    animation-delay:2s;

}

/* ========================= */
/* ANIMATIONS */
/* ========================= */

@keyframes pulseDot{

    0%,100%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.4);

    }

}

@keyframes floatPanel{

    0%,100%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(-14px);

    }

}

@keyframes floatCard{

    0%,100%{

        transform:
        translateY(0);

    }

    50%{

        transform:
        translateY(-12px);

    }

}

@keyframes rotateFrame{

    0%{

        transform:rotate(0deg);

    }

    100%{

        transform:rotate(360deg);

    }

}

@keyframes normalFade{

    0%,40%{

        opacity:1;

    }

    50%,100%{

        opacity:0;

    }

}

@keyframes comicFade{

    0%,40%{

        opacity:0;

    }

    50%,90%{

        opacity:1;

    }

    100%{

        opacity:0;

    }

}

/* ========================= */
/* RESPONSIVE */
/* ========================= */

@media(max-width:1200px){

    .hero-container{

        flex-direction:column;

    }

    .hero-left,
    .hero-right{

        width:100%;

    }

    .hero-title{

        font-size:4.8rem;

    }

}

@media(max-width:768px){

    .cs-hero{

        padding:
        130px 24px
        80px;

    }

    .hero-title{

        font-size:3.2rem;

        letter-spacing:-2px;

    }

    .hero-description{

        font-size:0.95rem;

        line-height:1.8;

    }

    .hero-image-wrapper{

        width:100%;
        height:480px;

    }

    .floating-card{

        display:none;

    }
    .panel{

    transform:scale(0.82);

}

.panel-1{

    top:10%;
    left:-2%;

}

.panel-2{

    top:6%;
    right:-2%;

}

.panel-3{

    bottom:12%;
    left:-4%;

}

.panel-4{

    bottom:10%;
    right:-4%;

}

}

@media(max-width:500px){

    .hero-title{

        font-size:2.5rem;

    }

    .hero-btn{

        width:100%;

        justify-content:center;

    }

    .stat-box{

        width:100%;

    }

}



 



/* ===== HERO TITLE (sized + line spacing) ===== */
.hero-title{
    font-size:clamp(2rem, 3.4vw, 2.9rem);
    letter-spacing:0.4px;
    line-height:1.45;
    max-width:600px;
}
.hero-title span{ color:var(--amber); }

/* ===== HERO STATS STRIP (cute + animated) ===== */
.hero-stats{ gap:14px; }
.stat-box{
    position:relative;
    display:flex;
    align-items:center;
    gap:11px;
    min-width:unset;
    padding:11px 16px 11px 14px;
    border-radius:16px;
    background:var(--surface);
    border:1px solid var(--line);
    box-shadow:0 10px 26px -20px rgba(46,74,35,0.5);
    overflow:hidden;
    opacity:0;
    transform:translateY(16px);
    animation:statRise .6s ease forwards;
    transition:transform .3s ease, box-shadow .3s ease;
}
.stat-box::before{
    content:"";
    position:absolute;
    left:0; top:0; bottom:0;
    width:4px;
}
.stat-box:nth-child(1)::before{ background:linear-gradient(180deg,#F58529,#DD2A7B,#8134AF); }
.stat-box:nth-child(2)::before{ background:#FF0000; }
.stat-box:nth-child(3)::before{ background:var(--green-600); }
.stat-box:nth-child(1){ animation-delay:.15s; }
.stat-box:nth-child(2){ animation-delay:.3s; }
.stat-box:nth-child(3){ animation-delay:.45s; }
.stat-box:hover{
    transform:translateY(-6px) scale(1.03);
    box-shadow:0 20px 36px -18px rgba(46,74,35,0.5);
}
.stat-box:hover .stat-ico{ animation:statWiggle .5s ease; }
.stat-ico{
    width:38px; height:38px;
    border-radius:11px;
    display:grid; place-items:center;
    font-size:1rem; color:#fff;
    flex-shrink:0;
    animation:statPop 3s ease-in-out infinite;
}
.stat-box:nth-child(2) .stat-ico{ animation-delay:.6s; }
.stat-box:nth-child(3) .stat-ico{ animation-delay:1.2s; }
.stat-ico.insta{ background:linear-gradient(135deg,#F58529,#DD2A7B 55%,#8134AF); }
.stat-ico.yt{ background:#FF0000; }
.stat-ico.design{ background:linear-gradient(135deg,#2E4A23,#668643); }
.stat-info h3{
    font-size:1.25rem;
    color:var(--green-900);
    margin:0;
    text-transform:none;
    letter-spacing:0;
    line-height:1.05;
}
.stat-info p{ font-size:0.66rem; color:var(--muted); margin:0; letter-spacing:.2px; }
@keyframes statRise{ to{ opacity:1; transform:translateY(0); } }
@keyframes statPop{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.1); } }
@keyframes statWiggle{ 0%,100%{ transform:rotate(0); } 25%{ transform:rotate(-10deg); } 75%{ transform:rotate(10deg); } }

/* ===== HERO REEL (9:16 flip card) ===== */
.hero-image-wrapper{
    width:330px;
    height:auto;
    aspect-ratio:9 / 16;
}
.hero-image-box{
    perspective:1600px;
    background:transparent;
    border:none;
    box-shadow:none;
    overflow:visible;
}
.reel-flip{
    position:relative;
    width:100%;
    height:100%;
    transform-style:preserve-3d;
    transition:transform 1.2s cubic-bezier(.7,0,.2,1);
}
.reel-flip.flipped{ transform:rotateY(180deg); }
.reel-face{
    position:absolute;
    inset:0;
    border-radius:30px;
    overflow:hidden;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    border:1px solid rgba(46,74,35,0.10);
    box-shadow:0 30px 70px -25px rgba(46,74,35,0.5);
    background:#EAF1DA;
}
.reel-back{ transform:rotateY(180deg); }
.reel-video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* ===== GLASS PANELS (dark glass + white text) ===== */
.panel,
.floating-card{
    background:rgba(30,45,28,0.55);
    border:1px solid rgba(255,255,255,0.18);
    color:#ffffff;
    box-shadow:0 12px 30px -10px rgba(0,0,0,0.40);
}
.panel i,
.floating-card i{ color:#FBAF47; }

/* ===== RESPONSIVE reel ===== */
@media(max-width:1200px){
    .hero-image-wrapper{ width:300px; }
}
@media(max-width:768px){
    .hero-image-wrapper{
        width:min(300px, 78%);
        height:auto;
        aspect-ratio:9 / 16;
    }
}

/* ========================================= */
/* WHAT I DO  (profile-card style) */
/* ========================================= */
.wid-section{ padding:90px 28px; background:#FDFBEF; overflow:hidden; }
.wid-top{ max-width:640px; margin:0 auto 54px; text-align:center; }
.wid-tag{
    display:inline-flex; padding:8px 16px; border-radius:999px;
    background:var(--green-100); border:1px solid var(--line);
    color:var(--green-600); font-size:0.72rem; font-weight:600;
    letter-spacing:.12em; text-transform:uppercase; margin-bottom:18px;
}
.wid-heading{ font-size:clamp(1.9rem, 3.4vw, 2.8rem); line-height:1.3; letter-spacing:.02em; color:var(--green-900); margin-bottom:16px; }
.wid-heading span{ color:var(--amber); }
.wid-sub{ max-width:540px; margin:auto; font-size:0.95rem; line-height:1.8; color:var(--muted); }

.wid-grid{ max-width:1180px; margin:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }

.wid-card{
    background:var(--surface); border:1px solid var(--line); border-radius:26px;
    overflow:hidden; box-shadow:0 20px 50px -34px rgba(46,74,35,0.5);
    transition:transform .4s ease, box-shadow .4s ease;
}
.wid-card:hover{ transform:translateY(-10px); box-shadow:0 34px 70px -34px rgba(46,74,35,0.55); }

.wid-media{ position:relative; height:180px; overflow:hidden; background:var(--green-100); }
.wid-img{ width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.wid-card:hover .wid-img{ transform:scale(1.07); }
.wid-save{
    position:absolute; top:14px; right:14px; width:36px; height:36px;
    border-radius:50%; display:grid; place-items:center;
    background:rgba(255,255,255,.85); backdrop-filter:blur(8px);
    color:var(--green-900); font-size:.8rem;
}
.wid-badge-soon{
    position:absolute; top:14px; right:14px; padding:6px 12px; border-radius:999px;
    background:var(--amber); color:#3a2410; font-size:.66rem; font-weight:700;
    letter-spacing:.04em; text-transform:uppercase;
}
.wid-avatar{
    position:absolute; left:20px; bottom:-24px; width:58px; height:58px;
    border-radius:18px; display:grid; place-items:center; color:#fff; font-size:1.3rem;
    border:3px solid var(--surface); box-shadow:0 10px 24px -10px rgba(46,74,35,.6);
    animation:widFloat 4s ease-in-out infinite;
}
.wid-avatar.design{ background:linear-gradient(135deg,#2E4A23,#668643); }
.wid-avatar.food{ background:linear-gradient(135deg,#FBAF47,#FFCB7D); color:#3a2410; }
.wid-avatar.cloud{ background:linear-gradient(135deg,#A3C45C,#668643); }

.wid-body{ padding:38px 22px 22px; }
.wid-name{ font-size:1.3rem; color:var(--green-900); letter-spacing:.02em; margin-bottom:8px; }
.wid-role{ font-size:0.86rem; line-height:1.6; color:var(--muted); margin-bottom:16px; min-height:42px; }
.wid-meta{ display:flex; flex-wrap:wrap; gap:14px; margin-bottom:18px; }
.wid-meta span{ display:inline-flex; align-items:center; gap:6px; font-size:0.74rem; color:var(--muted); }
.wid-meta i{ color:var(--amber); font-size:.76rem; }

.wid-stats{ display:flex; align-items:center; gap:8px; padding:14px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:18px; }
.wid-stats div{ flex:1; text-align:center; }
.wid-stats b{ display:block; font-family:var(--font-head); font-size:1rem; color:var(--green-900); line-height:1; margin-bottom:4px; }
.wid-stats span{ font-size:0.64rem; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; }

.wid-foot{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.wid-tools{ display:flex; align-items:center; gap:8px; font-size:0.76rem; color:var(--muted); }
.wid-tools i{ font-size:0.95rem; color:var(--green-600); transition:transform .3s ease; }
.wid-card:hover .wid-tools i{ transform:translateY(-2px); }
.wid-btn{
    display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px;
    border-radius:999px; background:var(--green-900); color:#fff;
    font-size:0.8rem; font-weight:600; transition:.35s ease;
}
.wid-btn:hover{ background:var(--amber); color:#3a2410; transform:translateY(-2px); }

.reveal{ opacity:0; transform:translateY(28px); transition:.7s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:translateY(0); }
.wid-card:nth-child(2).reveal{ transition-delay:.12s; }
.wid-card:nth-child(3).reveal{ transition-delay:.24s; }
@keyframes widFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

@media(max-width:980px){ .wid-grid{ grid-template-columns:1fr; max-width:460px; } }
@media(max-width:768px){ .wid-section{ padding:70px 18px; } }