/* Home page (index.html) layout — hero, services, about, process, team, contact. */

body{ overflow-x:hidden; }
a{ color:inherit; text-decoration:none;}

.blob{ position:fixed; border-radius:50%; filter:blur(70px); opacity:0.35; z-index:0; pointer-events:none;}
.blob1{ width:420px; height:420px; background:var(--coral); top:-120px; right:-100px;}
.blob2{ width:380px; height:380px; background:var(--purple); bottom:0; left:-140px;}
.blob3{ width:300px; height:300px; background:var(--yellow); top:40%; right:10%;}

.hero{ position:relative; z-index:1; padding:110px 24px 90px; text-align:center;}
.eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:8px 18px; border-radius:999px; font-size:13.5px; color:#fff; font-weight:700; margin-bottom:28px; background:linear-gradient(120deg, var(--purple), var(--coral));}
.hero h1{ font-size:clamp(36px,6vw,64px); font-weight:600; line-height:1.1; max-width:880px; margin:0 auto 24px;}
.hero h1 .hl{ position:relative; display:inline-block;}
.hero h1 .hl::after{ content:""; position:absolute; left:-4px; right:-4px; bottom:6px; height:14px; background:var(--yellow); z-index:-1; opacity:0.6; transform:skewX(-8deg);}
.hero p{ font-size:18px; color:var(--text-dim); max-width:600px; margin:0 auto 40px;}
.hero-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

.stats{ display:flex; justify-content:center; gap:56px; flex-wrap:wrap; margin-top:76px;}
.stat{ background:#fff; border:2px solid var(--border); border-radius:16px; padding:18px 26px;}
.stat b{ display:block; font-family:'Fredoka'; font-size:30px; font-weight:600; color:var(--coral);}
.stat span{ color:var(--text-dim); font-size:13px; font-weight:600;}

section{ position:relative; z-index:1; padding:100px 24px;}
.section-head{ text-align:center; max-width:640px; margin:0 auto 60px;}
.section-head h2{ font-size:clamp(28px,4vw,42px); font-weight:600; margin-bottom:14px;}
.section-head p{ color:var(--text-dim); font-size:16.5px;}

.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.card{ background:var(--panel); border:2px solid var(--border); border-radius:var(--radius); padding:32px; transition:transform .25s, box-shadow .25s;}
.card:nth-child(1):hover{ transform:rotate(-1deg) translateY(-6px); box-shadow:8px 10px 0 var(--coral);}
.card:nth-child(2):hover{ transform:rotate(1deg) translateY(-6px); box-shadow:8px 10px 0 var(--purple);}
.card:nth-child(3):hover{ transform:rotate(-1deg) translateY(-6px); box-shadow:8px 10px 0 var(--teal);}
.card-icon{ width:52px; height:52px; border-radius:16px; margin-bottom:20px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:20px; color:#fff;}
.card:nth-child(1) .card-icon{ background:var(--coral);}
.card:nth-child(2) .card-icon{ background:var(--purple);}
.card:nth-child(3) .card-icon{ background:var(--teal);}
.card h3{ font-size:19px; margin-bottom:10px; font-weight:600;}
.card p{ color:var(--text-dim); font-size:14.5px; margin-bottom:18px;}
.card ul{ list-style:none;}
.card ul li{ font-size:14px; color:var(--text-dim); padding:6px 0; display:flex; gap:10px; align-items:flex-start; font-weight:500;}
.card ul li::before{ content:"✦"; color:var(--coral);}

.why{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.why-item{ padding:26px; border-radius:16px; background:#fff; border:2px solid var(--border); text-align:center;}
.why-item .emoji{ font-size:28px; margin-bottom:10px; display:block;}
.why-item b{ display:block; font-size:15.5px; margin-bottom:8px; font-family:'Fredoka'; font-weight:600;}
.why-item p{ color:var(--text-dim); font-size:13.8px;}

.process{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; counter-reset:step;}
.step{ background:#fff; border:2px solid var(--border); border-radius:var(--radius); padding:32px; position:relative;}
.step-num{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Fredoka'; font-weight:600; font-size:17px; color:#fff; margin-bottom:18px;}
.step:nth-child(1) .step-num{ background:var(--coral);}
.step:nth-child(2) .step-num{ background:var(--purple);}
.step:nth-child(3) .step-num{ background:var(--teal);}
.step h3{ font-size:18px; margin-bottom:8px; font-weight:600;}
.step p{ color:var(--text-dim); font-size:14.5px;}

.team{ display:grid; grid-template-columns:1fr 1fr; gap:26px;}
.person{ background:#fff; border:2px solid var(--border); border-radius:var(--radius); padding:34px; display:flex; flex-direction:column; gap:16px;}
.avatar{ width:62px; height:62px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:22px; color:#fff; font-family:'Fredoka';}
.person:nth-child(1) .avatar{ background:linear-gradient(135deg, var(--coral), var(--yellow));}
.person:nth-child(2) .avatar{ background:linear-gradient(135deg, var(--purple), var(--teal));}
.person h3{ font-size:20px; font-weight:600;}
.person .role{ font-size:13.5px; font-weight:700; margin-top:2px; color:var(--purple);}
.person p.bio{ color:var(--text-dim); font-size:14.5px;}
.tags{ display:flex; gap:8px; flex-wrap:wrap;}
.tag{ font-size:12px; padding:6px 12px; border-radius:999px; background:var(--bg); border:2px solid var(--border); font-weight:600;}
.person-social{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; line-height:1; color:var(--purple);}
.person-social:hover{ text-decoration:underline;}
.person-social svg{ display:block; flex-shrink:0;}

.contact-box{ background:linear-gradient(120deg, var(--purple), var(--coral)); border-radius:28px; padding:64px 40px; text-align:center; color:#fff;}
.contact-box h2{ font-size:clamp(26px,4vw,38px); margin-bottom:14px; font-weight:600;}
.contact-box p{ opacity:0.9; margin-bottom:32px;}
.contact-actions{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}
.contact-box .btn-primary{ background:#fff; color:var(--purple); box-shadow:0 4px 0 rgba(0,0,0,0.15);}
.socials{ display:flex; gap:14px; justify-content:center; margin-top:32px;}
.social-btn{ width:42px; height:42px; border-radius:50%; border:2px solid rgba(255,255,255,0.5); display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; transition:.2s;}
.social-btn:hover{ background:#fff; color:var(--purple);}
.social-btn svg{ display:block; border-radius:5px;}

.contact-form{ max-width:520px; margin:0 auto; text-align:left; position:relative;}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-group{ margin-bottom:16px;}
.form-group label{ display:block; font-size:13px; font-weight:700; color:#fff; margin-bottom:6px;}
.form-group input, .form-group textarea{
  width:100%; padding:12px 14px; border-radius:12px; border:2px solid rgba(255,255,255,0.5);
  background:rgba(255,255,255,0.12); color:#fff; font-family:inherit; font-size:14.5px; resize:vertical;
}
.form-group input::placeholder, .form-group textarea::placeholder{ color:rgba(255,255,255,0.7);}
.form-group input:focus, .form-group textarea:focus{ outline:none; border-color:#fff; background:rgba(255,255,255,0.2);}
.contact-form .btn{ width:100%; justify-content:center; font-size:15px;}
.form-status{ margin-top:14px; font-size:13.5px; min-height:18px; font-weight:600;}
.form-status.success{ color:#d6ffe8;}
.form-status.error{ color:#ffe0e0;}
.hp-field{ position:absolute; left:-9999px; opacity:0;}
.form-divider{ text-align:center; color:rgba(255,255,255,0.8); font-size:13px; margin:26px 0 18px; font-weight:600;}

@media(max-width:860px){
  .cards{ grid-template-columns:1fr;}
  .process{ grid-template-columns:1fr;}
  .team{ grid-template-columns:1fr;}
  .why{ grid-template-columns:1fr 1fr;}
  .nav-links{ position:fixed; top:66px; left:0; right:0; background:var(--bg); flex-direction:column; padding:20px 24px; border-bottom:2px solid var(--border); display:none; gap:16px;}
  .nav-links.open{ display:flex;}
  .menu-toggle{ display:block;}
  .blob{ opacity:0.2;}
  .form-row{ grid-template-columns:1fr;}
}
@media(max-width:520px){ .why{ grid-template-columns:1fr;} }