/* ==========================================================================
   EasyTrade 4U — HOME PAGE (index.html) — page-specific styles
   Loaded after root.css (green + white theme)
   ========================================================================== */

.learn-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center}

/* Learning-mindset panel */
.visual{position:relative;overflow:hidden;border-radius:8px;padding:34px;background:linear-gradient(180deg,rgba(4,59,45,.92) 0%,rgba(4,59,45,.55) 38%,rgba(4,59,45,.08) 75%,rgba(4,59,45,0) 100%),url("../assets/images/mindset.webp") center/cover no-repeat,var(--deeper);color:#fff;min-height:350px;display:flex;flex-direction:column;justify-content:flex-start;box-shadow:var(--shadow-lg)}
.visual:before{display:none}
.visual>*{position:relative}
.visual .eyebrow{color:var(--accent-light)}.visual .eyebrow:before{background:var(--accent-light)}
.quote{font-size:25px;font-weight:800;line-height:1.28;color:#fff}

.not-for{background:linear-gradient(180deg,#f0faf6 0%,#f7fcfa 100%)}
.list{display:grid;gap:11px;margin-top:18px}.list div{color:var(--ink2)}.x{color:var(--muted);margin-right:8px;font-weight:900}

/* Consultation form (sits on the green CTA band) */
.form-wrap{max-width:560px;margin:40px auto 0;background:#fff;color:var(--text);border:1px solid rgba(255,255,255,.4);padding:30px;border-radius:8px;text-align:left;box-shadow:var(--shadow-lg)}
.form-wrap h3{text-align:center;margin-bottom:20px;color:var(--deep);font-size:22px}
form{display:grid;gap:13px}
input,select,textarea{width:100%;padding:14px 16px;background:#fff;color:var(--text);border:1px solid var(--line);border-radius:6px;outline:none;font:inherit;font-size:15px;transition:border-color .2s,box-shadow .2s}
input::placeholder,textarea::placeholder{color:#7d9b8e}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(18,168,120,.14)}
textarea{min-height:92px;resize:vertical}
.form-wrap button{width:100%;cursor:pointer;font-size:16px}
.cta .form-wrap p.fineprint{font-size:11px;line-height:1.5;margin:14px 0 0;color:var(--muted);max-width:none}

/* FAQ */
.faq{max-width:820px}
.faq-item{background:#fff;border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px;padding:20px 24px;margin-bottom:14px;box-shadow:0 8px 24px rgba(8,122,88,.06);transition:transform .25s,box-shadow .25s}
.faq-item:hover{transform:translateX(4px);box-shadow:var(--shadow)}
.faq-q{font-weight:800;font-size:17px;color:var(--deep)}
.faq-a{color:var(--muted);font-size:14.5px;margin-top:7px}

/* Floating button */
.telegram{position:fixed;right:22px;bottom:22px;z-index:90;background:var(--grad);color:#fff;width:58px;height:58px;border-radius:12px;display:grid;place-items:center;font-size:25px;font-weight:900;box-shadow:0 12px 28px rgba(18,168,120,.45);transition:transform .2s,box-shadow .2s}
.telegram:hover{transform:translateY(-4px) scale(1.04);box-shadow:0 18px 34px rgba(18,168,120,.55)}

@media(max-width:850px){
 .learn-grid{grid-template-columns:1fr;gap:34px}
 .visual{min-height:270px}
 .telegram{width:52px;height:52px;right:16px;bottom:16px}
}