/* ================================================
   HOME HOOK SECTIONS — Calm, executive, disciplined
================================================ */

.hooks-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:4rem 1.5rem;max-width:1400px;margin:0 auto}

.hook-section{position:relative;padding:6rem 3.5rem;text-align:center;overflow:hidden;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:20px;min-height:505px;transition:transform .45s cubic-bezier(.23,1,.32,1),box-shadow .45s;cursor:default}
.hook-section:hover{transform:translateY(-4px) rotateX(1deg) rotateY(.5deg);box-shadow:0 20px 50px rgba(0,0,0,.12)}
.hook-section *{position:relative;z-index:3}

.hook-bg-img{position:absolute;inset:0;z-index:0;pointer-events:none}
.hook-bg-img img{width:100%;height:100%;object-fit:cover;opacity:.8;filter:saturate(1.1)}
.hook-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(10,10,15,.4)}
.hook-section::before{content:'';position:absolute;inset:0;z-index:2;background-image:radial-gradient(rgba(255,255,255,.03) 1px,transparent 1px);background-size:20px 20px;pointer-events:none;border-radius:20px}
.hook-watermark{position:absolute;z-index:1;opacity:.025;pointer-events:none;top:50%;left:50%;transform:translate(-50%,-50%);width:380px;height:380px}

.hook-main{font-family:'DM Sans',sans-serif;font-size:clamp(1.9rem,3vw,2.6rem);font-weight:800;letter-spacing:-.03em;line-height:1.2;max-width:480px;margin:0 auto 1.2rem;color:#fff;text-shadow:0 3px 16px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.3)}
.hook-sub{font-size:clamp(1.05rem,1.4vw,1.25rem);font-style:normal;font-weight:400;color:rgba(255,255,255,.82);max-width:420px;margin:0 auto 2.5rem;line-height:1.65;text-shadow:0 2px 10px rgba(0,0,0,.4),0 0 3px rgba(0,0,0,.2)}

.hook-buttons{display:flex;justify-content:center}
.hook-btn{display:inline-flex;align-items:center;gap:6px;padding:.65rem 1.4rem;border-radius:100px;font-family:inherit;font-size:.82rem;font-weight:600;text-decoration:none;transition:all .3s;cursor:pointer}
.hook-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hook-btn-primary{background:#4a8c4e;color:#fff;border:2px solid #4a8c4e;min-width:210px;justify-content:center}
.hook-btn-primary:hover{background:#3d7840;border-color:#3d7840;transform:translateY(-2px);box-shadow:0 6px 20px rgba(74,140,78,.35)}
.hook-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}

/* ================================================
   HOW I WORK — Dominant step numbers, pastel cards
================================================ */
.process-card{background:rgba(235,240,255,.85)!important;color:#1a1a1a!important;border:1px solid rgba(0,0,0,.06)!important}
.process-card::before{
    font-size:5.5rem!important;
    font-weight:900!important;
    color:rgba(0,0,0,.07)!important;
    letter-spacing:-.04em!important;
    line-height:1!important
}
.process-card .process-title{color:#0a0a0a!important}
.process-card .process-text{color:#444!important}
.process-card:nth-child(2){background:rgba(235,255,240,.85)!important}
.process-card:nth-child(3){background:rgba(255,240,235,.85)!important}

@media(max-width:900px){
    .hooks-row{grid-template-columns:1fr;padding:2.5rem 1rem;gap:10px}
    .hook-section{padding:4rem 2rem;min-height:400px}
}