/* ==========================================
   EASY WORK INDIA — Premium Design System
   ========================================== */
:root {
  --navy: #0f1f3d;
  --navy-deep: #07122a;
  --navy-light: #1a3260;
  --blue: #2563eb;
  --blue-light: #3b82f6;
  --teal: #0d9488;
  --teal-light: #14b8a6;
  --green: #16a34a;
  --gold: #d97706;
  --red: #dc2626;
  --text: #1e293b;
  --text-muted: #64748b;
  --bg: #f8fafc;
  --bg-card: #ffffff;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow: 0 4px 16px rgba(0,0,0,0.08);
  --shadow-lg: 0 20px 50px rgba(0,0,0,0.12);
  --shadow-xl: 0 40px 80px rgba(0,0,0,0.15);
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Poppins', 'Inter', sans-serif;
  --transition: 0.22s cubic-bezier(0.4,0,0.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;height:auto}
ul{list-style:none}
.section-wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.gradient-text{background:linear-gradient(135deg,#2563eb,#0d9488);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ANNOUNCEMENT BAR */
.announcement-bar{background:linear-gradient(90deg,#2563eb,#0d9488);color:#fff;padding:10px 20px;display:flex;align-items:center;justify-content:space-between;font-size:.875rem;font-weight:500}
.announcement-inner{display:flex;align-items:center;gap:10px;flex:1;justify-content:center}
.ann-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;animation:pulse 2s infinite;flex-shrink:0}
.announcement-inner a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.ann-close{color:rgba(255,255,255,.8);font-size:1.2rem;line-height:1;padding:0 4px;flex-shrink:0}
.ann-close:hover{color:#fff}

/* HEADER */
.site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.95);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border);transition:box-shadow var(--transition)}
.site-header.scrolled{box-shadow:var(--shadow)}
.header-inner{display:flex;align-items:center;gap:32px;padding:14px 24px;max-width:1200px;margin:0 auto}
.brand{display:flex;align-items:center;gap:10px;flex-shrink:0;text-decoration:none}
.brand-icon{width:38px;height:38px;background:linear-gradient(135deg,#2563eb,#0d9488);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:800;font-size:.85rem}
.brand-text{font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--navy)}
.brand-india{color:var(--teal)}
.main-nav{display:flex;align-items:center;gap:4px;flex:1}
.nav-link{padding:8px 14px;font-size:.9rem;font-weight:500;color:var(--text-muted);border-radius:var(--radius-sm);transition:color var(--transition),background var(--transition)}
.nav-link:hover,.nav-link.active{color:var(--blue);background:#eff6ff}
.nav-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;transition:all var(--transition);cursor:pointer;white-space:nowrap}
.btn-primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 4px 15px rgba(37,99,235,.35)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 8px 25px rgba(37,99,235,.45)}
.btn-ghost{color:var(--text-muted);background:transparent}
.btn-ghost:hover{color:var(--blue);background:#eff6ff}
.btn-outline-white{background:rgba(255,255,255,.15);border:2px solid rgba(255,255,255,.6);color:#fff;backdrop-filter:blur(8px)}
.btn-outline-white:hover{background:rgba(255,255,255,.25);border-color:#fff}
.btn-xl{padding:14px 28px;font-size:1rem;border-radius:var(--radius)}
.btn-full{width:100%;justify-content:center}
.hamburger{display:none;flex-direction:column;gap:5px;padding:6px;margin-left:auto}
.hamburger span{display:block;width:22px;height:2px;background:var(--text);border-radius:2px;transition:var(--transition)}

/* HERO */
.hero{background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 50%,#1a4060 100%);color:#fff;padding:80px 0 100px;position:relative;overflow:hidden;min-height:88vh;display:flex;align-items:center}
.hero-bg-shapes{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:.25}
.blob-1{width:500px;height:500px;background:radial-gradient(circle,#2563eb,transparent);top:-150px;left:-150px}
.blob-2{width:400px;height:400px;background:radial-gradient(circle,#0d9488,transparent);bottom:-100px;right:-100px}
.hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.75rem;font-weight:700;letter-spacing:.12em;color:var(--teal-light);margin-bottom:16px}
.hero-copy h1{font-family:var(--font-display);font-size:clamp(2.2rem,5vw,3.5rem);font-weight:800;line-height:1.1;margin-bottom:20px;color:#fff}
.hero-lead{color:rgba(255,255,255,.8);font-size:1.05rem;margin-bottom:20px;max-width:480px}
.hero-project-pills{display:flex;flex-direction:column;gap:10px;margin-bottom:28px;max-width:520px}
.hero-proj-pill{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:12px;font-size:.9rem;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 14px rgba(0,0,0,.15)}
.hero-proj-pill.green{background:rgba(22,163,74,.22);color:#bbf7d0;border:1.5px solid rgba(74,222,128,.4)}
.hero-proj-pill.green strong{color:#fff}
.hero-proj-pill.green b{color:#4ade80}
.hero-proj-pill.gold{background:rgba(217,119,6,.22);color:#fde68a;border:1.5px solid rgba(251,191,36,.4)}
.hero-proj-pill.gold strong{color:#fff}
.hero-proj-pill.gold b{color:#fbbf24}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px}
.hero-stats{display:flex;gap:24px;align-items:center}
.stat-item{text-align:center}
.stat-item strong{display:block;font-family:var(--font-display);font-size:1.5rem;font-weight:800;color:#fff}
.stat-item span{font-size:.78rem;color:rgba(255,255,255,.65)}
.stat-divider{width:1px;height:40px;background:rgba(255,255,255,.2)}
.hero-visual{position:relative}
.hero-card-main{background:rgba(255,255,255,.08);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-xl);padding:28px;box-shadow:0 30px 80px rgba(0,0,0,.3)}
.hcard-header{display:flex;align-items:center;gap:14px;margin-bottom:24px}
.hcard-avatar{width:48px;height:48px;background:linear-gradient(135deg,#2563eb,#0d9488);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1rem;color:#fff;flex-shrink:0}
.hcard-header>div{flex:1}
.hcard-header strong{display:block;font-weight:700;font-size:.95rem}
.hcard-header span{font-size:.8rem;color:rgba(255,255,255,.6)}
.hcard-badge{background:#22c55e;color:#fff;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:999px}
.earning-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.earning-row span{font-size:.85rem;color:rgba(255,255,255,.7)}
.earning-val{font-size:1.6rem;font-weight:800;color:#4ade80}
.progress-bar-wrap{background:rgba(255,255,255,.1);border-radius:999px;height:6px;margin-bottom:18px}
.progress-bar{height:100%;background:linear-gradient(90deg,#22c55e,#4ade80);border-radius:999px}
.mini-stats{display:flex;gap:12px;flex-wrap:wrap}
.mini-stats div{display:flex;align-items:center;gap:6px;font-size:.8rem;color:rgba(255,255,255,.7);background:rgba(255,255,255,.08);padding:6px 12px;border-radius:999px}
.floating-badge{position:absolute;background:#fff;border-radius:var(--radius);padding:10px 14px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg);font-size:.8rem;animation:float 4s ease-in-out infinite}
.floating-badge i{font-size:1.2rem;color:#22c55e}
.floating-badge strong{display:block;font-weight:700;color:var(--text);font-size:.82rem}
.floating-badge small{color:var(--text-muted)}
.badge-1{top:-20px;right:-20px}
.badge-2{bottom:30px;left:-30px;animation-delay:2s}

/* FEATURES STRIP */
.features-strip{background:var(--bg-card);border-bottom:1px solid var(--border);padding:28px 0}
.features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.feature-item{display:flex;align-items:center;gap:14px}
.feat-icon{width:46px;height:46px;border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.feat-icon.teal{background:#ccfbf1;color:#0d9488}
.feat-icon.blue{background:#dbeafe;color:#2563eb}
.feat-icon.gold{background:#fef3c7;color:#d97706}
.feat-icon.green{background:#dcfce7;color:#16a34a}
.feature-item b{display:block;font-weight:700;font-size:.9rem;margin-bottom:2px}
.feature-item small{font-size:.78rem;color:var(--text-muted)}

/* SECTION HEADINGS */
.section-heading{text-align:center;margin-bottom:48px}
.section-heading h2{font-family:var(--font-display);font-size:clamp(1.8rem,4vw,2.6rem);font-weight:800;color:var(--navy);margin-bottom:12px;line-height:1.2}
.section-heading p{color:var(--text-muted);font-size:1.05rem;max-width:560px;margin:0 auto}

/* PROJECTS SECTION */
.projects-section{padding:80px 0;background:linear-gradient(180deg,#f8fafc 0%,#eef2ff 100%)}
.project-grid{display:grid;grid-template-columns:repeat(2,1fr);max-width:860px;margin:0 auto 24px;gap:28px}
.project-card{background:#fff;border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);transition:transform var(--transition),box-shadow var(--transition);position:relative;padding:28px;display:flex;flex-direction:column}
.project-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}
.featured-card{border-color:#d97706}
.featured-ribbon{position:absolute;top:20px;right:-8px;background:linear-gradient(135deg,#d97706,#f59e0b);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.08em;padding:4px 14px 4px 10px;border-radius:4px 0 0 4px}
.project-card-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}
.proj-icon{width:56px;height:56px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;font-size:1.6rem}
.card-green .proj-icon{background:#dcfce7;color:#16a34a}
.card-blue .proj-icon{background:#dbeafe;color:#2563eb}
.card-gold .proj-icon{background:#fef3c7;color:#d97706}
.proj-badge{font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:999px;background:#dcfce7;color:#16a34a}
.proj-badge.blue-badge{background:#dbeafe;color:#2563eb}
.proj-badge.gold-badge{background:#fef3c7;color:#d97706}
.project-card h3{font-family:var(--font-display);font-size:1.05rem;font-weight:800;letter-spacing:.04em;margin-bottom:12px;color:var(--navy)}
.proj-fee{font-size:.9rem;color:var(--text-muted);margin-bottom:20px;padding:10px 14px;background:var(--bg);border-radius:var(--radius-sm)}
.proj-fee span{font-weight:800;color:var(--navy);font-size:1rem}
.proj-desc-box{font-size:.92rem;font-weight:700;margin-bottom:18px;padding:10px 14px;border-radius:var(--radius-sm);display:flex;align-items:center;gap:8px;letter-spacing:.02em}
.card-green .proj-desc-box{background:#f0fdf4;color:#166534;border:1px solid #bbf7d0}
.card-gold .proj-desc-box{background:#fffbeb;color:#92400e;border:1px solid #fde68a}

/* PROJECT RATE HEADLINE CARD */
.proj-headline-rate{padding:14px 16px;border-radius:var(--radius);margin-bottom:18px;display:flex;flex-direction:column;gap:6px}
.proj-headline-rate.green{background:linear-gradient(135deg,#f0fdf4 0%,#dcfce7 100%);border:1.5px solid #86efac}
.proj-headline-rate.gold{background:linear-gradient(135deg,#fffbeb 0%,#fef3c7 100%);border:1.5px solid #fde68a}
.proj-rate-top{display:flex;align-items:baseline;gap:6px}
.proj-rate-big{font-family:var(--font-display);font-size:1.75rem;font-weight:800;line-height:1}
.proj-headline-rate.green .proj-rate-big{color:#15803d}
.proj-headline-rate.gold .proj-rate-big{color:#b45309}
.proj-rate-per{font-size:.9rem;font-weight:700;color:var(--text-muted)}
.proj-earnings-sub{font-size:.88rem;color:#334155;font-weight:600}
.proj-headline-rate.green .proj-earnings-sub strong{color:#166534}
.proj-headline-rate.gold .proj-earnings-sub strong{color:#92400e}

.hero-card-ff{background:rgba(217,119,6,.12);border-color:rgba(251,191,36,.25)}
.proj-features{flex:1;margin-bottom:24px}
.proj-features li{display:flex;align-items:flex-start;gap:10px;padding:8px 0;border-bottom:1px dashed var(--border);font-size:.9rem;color:var(--text)}
.proj-features li:last-child{border-bottom:none}
.card-green .proj-features li i{color:#16a34a}
.card-blue .proj-features li i{color:#2563eb}
.card-gold .proj-features li i{color:#d97706}
.proj-btn{width:100%;padding:14px;font-weight:800;font-size:.95rem;letter-spacing:.08em;border-radius:var(--radius);cursor:pointer;transition:all var(--transition);display:flex;align-items:center;justify-content:center;gap:8px}
.proj-btn-green{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff;box-shadow:0 4px 15px rgba(22,163,74,.35)}
.proj-btn-green:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(22,163,74,.45)}
.proj-btn-blue{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 4px 15px rgba(37,99,235,.35)}
.proj-btn-blue:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(37,99,235,.45)}
.proj-btn-gold{background:linear-gradient(135deg,#d97706,#b45309);color:#fff;box-shadow:0 4px 15px rgba(217,119,6,.35)}
.proj-btn-gold:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(217,119,6,.45)}
.gst-note{text-align:center;font-size:.85rem;color:var(--text-muted)}

/* HOW IT WORKS */
.how-section{padding:80px 0;background:#fff}
.steps-grid{display:flex;align-items:center;justify-content:center;gap:0}
.step-item{flex:1;max-width:280px;text-align:center;padding:0 20px}
.step-num{font-family:var(--font-display);font-size:.75rem;font-weight:800;letter-spacing:.12em;color:var(--teal);margin-bottom:16px}
.step-icon{width:72px;height:72px;background:linear-gradient(135deg,#eff6ff,#f0fdf4);border:2px solid var(--border);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.8rem;color:var(--blue);margin:0 auto 16px}
.step-item h3{font-family:var(--font-display);font-size:1.05rem;font-weight:700;margin-bottom:8px;color:var(--navy)}
.step-item p{font-size:.88rem;color:var(--text-muted)}
.step-connector{width:80px;height:2px;background:linear-gradient(90deg,#2563eb,#0d9488);position:relative;flex-shrink:0}

/* REVIEWS */
.reviews-section{padding:80px 0;background:linear-gradient(180deg,#f8fafc,#eff6ff)}
.reviews-track{display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;padding:12px 8px 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.reviews-track::-webkit-scrollbar{display:none}
.review-card{flex:0 0 min(90vw,360px);scroll-snap-align:start;background:#fff;border-radius:var(--radius-xl);padding:28px;box-shadow:var(--shadow);border:1px solid var(--border);display:flex;flex-direction:column;min-height:220px}
.review-stars{color:#f59e0b;margin-bottom:14px;font-size:1rem;letter-spacing:2px}
.review-text{color:var(--text);font-size:.92rem;line-height:1.65;flex:1}
.review-person{display:flex;align-items:center;gap:12px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border-light)}
.rv-avatar{width:44px;height:44px;border-radius:50%;background:linear-gradient(135deg,#2563eb,#0d9488);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}
.review-person strong{display:block;font-size:.9rem;color:var(--navy);font-weight:700}
.review-person span{font-size:.78rem;color:var(--text-muted)}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:8px}
.carousel-btn{width:44px;height:44px;border-radius:50%;background:#fff;border:1px solid var(--border);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:1rem;box-shadow:var(--shadow-sm);transition:all var(--transition)}
.carousel-btn:hover{background:var(--blue);color:#fff;border-color:var(--blue)}
.review-dots{display:flex;gap:6px}
.review-dots span{width:8px;height:8px;border-radius:50%;background:var(--border);cursor:pointer;transition:all var(--transition)}
.review-dots span.active{background:var(--blue);width:20px;border-radius:4px}

/* PAYOUTS */
.payouts-section{padding:80px 0;background:#fff}
.payouts-table-wrap{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);overflow-x:auto}
.payouts-table{width:100%;border-collapse:collapse;min-width:520px}
.payouts-table th{background:linear-gradient(135deg,#0f1f3d,#1a3260);color:#fff;padding:16px 20px;text-align:left;font-size:.85rem;font-weight:600;letter-spacing:.04em}
.payouts-table td{padding:14px 20px;font-size:.9rem;border-bottom:1px solid var(--border-light);transition:background .6s ease}
.payouts-table tbody tr:nth-child(odd){background:#fff}
.payouts-table tbody tr:nth-child(even){background:#f8fafc}
.payouts-table tbody tr:hover{background:#eff6ff}
.payouts-table tbody tr.row-flash{animation:payoutFlash 2.5s ease-out}
@keyframes payoutFlash{
  0%{background:rgba(34,197,94,.35)}
  50%{background:rgba(34,197,94,.15)}
  100%{background:transparent}
}
.payouts-date-wrap{text-align:center;margin-top:16px}
.payouts-date{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background:#f8fafc;border:1px solid #e2e8f0;padding:8px 18px;border-radius:999px;
  font-size:.82rem;color:var(--text);font-weight:600;box-shadow:0 2px 6px rgba(0,0,0,.03)
}
.live-pulse-dot{
  width:9px;height:9px;border-radius:50%;background:#16a34a;box-shadow:0 0 0 0 rgba(22,163,74,.6);
  animation:liveDotPulse 1.8s infinite;display:inline-block;flex-shrink:0
}
@keyframes liveDotPulse{
  0%{box-shadow:0 0 0 0 rgba(22,163,74,.7);transform:scale(0.95)}
  70%{box-shadow:0 0 0 7px rgba(22,163,74,0);transform:scale(1.1)}
  100%{box-shadow:0 0 0 0 rgba(22,163,74,0);transform:scale(0.95)}
}
.payout-status-badge{
  display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;
  font-size:.74rem;font-weight:700;background:rgba(34,197,94,.12);color:#15803d;border:1px solid rgba(34,197,94,.25)
}

/* FLOATING LIVE PAYOUT TOAST */
.floating-payout-toast{
  position:fixed;bottom:24px;left:24px;background:#fff;border-radius:14px;
  padding:12px 16px;box-shadow:0 10px 30px rgba(15,31,61,.18);border:1px solid #e2e8f0;
  display:flex;align-items:center;gap:12px;z-index:900;max-width:340px;
  transform:translateY(120px);opacity:0;transition:all .4s cubic-bezier(0.16,1,0.3,1);
  pointer-events:none
}
.floating-payout-toast.active{
  transform:translateY(0);opacity:1;pointer-events:auto
}
.fpt-icon{
  width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#16a34a,#10b981);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0
}
.fpt-body{flex:1;min-width:0}
.fpt-name{font-weight:700;font-size:.85rem;color:var(--navy);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fpt-sub{font-size:.75rem;color:var(--text-muted);display:flex;align-items:center;gap:6px}
.fpt-amount{color:#16a34a;font-weight:800}
.fpt-close{background:none;border:none;color:#94a3b8;cursor:pointer;font-size:1.1rem;padding:0;display:flex;align-items:center}
.fpt-close:hover{color:#0f172a}

/* RATE US */
.rate-section{padding:80px 0;background:linear-gradient(135deg,#eff6ff,#f0fdf4)}
.rate-container{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.rate-left h2{font-family:var(--font-display);font-size:2rem;font-weight:800;color:var(--navy);margin-bottom:14px}
.rate-left p{color:var(--text-muted);margin-bottom:24px}
.trust-badges{display:flex;gap:12px;flex-wrap:wrap}
.tbadge{display:flex;align-items:center;gap:6px;font-size:.82rem;font-weight:600;color:var(--navy);background:#fff;padding:8px 14px;border-radius:999px;border:1px solid var(--border)}
.tbadge i{color:var(--teal)}
.rate-card{background:#fff;border-radius:var(--radius-xl);padding:32px;box-shadow:var(--shadow-lg);border:1px solid var(--border)}
.rate-card h3{font-family:var(--font-display);font-size:1.4rem;font-weight:800;color:var(--navy);margin-bottom:4px;text-align:center}
.rate-hint{text-align:center;color:var(--text-muted);font-size:.88rem;margin-bottom:20px}
.star-pick{display:flex;justify-content:center;gap:8px;margin-bottom:20px;font-size:1.8rem;color:var(--border)}
.star-pick i{cursor:pointer;transition:color var(--transition),transform var(--transition)}
.star-pick i:hover,.star-pick i.on{color:#f59e0b;transform:scale(1.15)}
.rate-card textarea,.rate-card input{width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font-family:inherit;font-size:.9rem;margin-bottom:12px;resize:none;outline:none;transition:border-color var(--transition);color:var(--text)}
.rate-card textarea:focus,.rate-card input:focus{border-color:var(--blue)}
.char-left{text-align:right;font-size:.75rem;color:var(--text-muted);margin:-6px 0 12px}
.thank-you{display:none;text-align:center;padding:40px 20px}
.thank-you.show{display:block}
.thank-you i{font-size:3rem;color:#16a34a;margin-bottom:14px}
.thank-you h3{font-family:var(--font-display);font-size:1.5rem;color:var(--navy);margin-bottom:8px}
.thank-you p{color:var(--text-muted)}

/* CONTACT */
.contact-section{padding:80px 0;background:#fff}
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.contact-card{text-align:center;padding:36px 24px;background:#f8fafc;border-radius:var(--radius-xl);border:1px solid var(--border);transition:all var(--transition)}
.contact-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.contact-card>i{font-size:2rem;color:var(--blue);margin-bottom:14px;display:block}
.contact-card h3{font-weight:700;margin-bottom:10px;color:var(--navy)}
.contact-card p{color:var(--text-muted);font-size:.9rem;line-height:1.7}
.contact-card a{color:var(--blue)}

/* FOOTER */
.site-footer{background:var(--navy-deep);color:rgba(255,255,255,.75);padding:60px 0 0}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px;border-bottom:1px solid rgba(255,255,255,.08)}
.footer-brand-col .brand{margin-bottom:14px}
.footer-brand-col .brand-text{color:#fff}
.footer-brand-col p{font-size:.88rem;line-height:1.7;margin-bottom:8px}
.footer-address{font-size:.82rem;color:rgba(255,255,255,.5)}
.footer-col h4{color:#fff;font-weight:700;margin-bottom:16px;font-size:.9rem}
.footer-col a,.footer-col button,.footer-link-btn{display:block;color:rgba(255,255,255,.65);font-size:.88rem;margin-bottom:8px;transition:color var(--transition);text-align:left;background:none;border:none;cursor:pointer;font-family:inherit;padding:0;text-decoration:none}
.footer-col a:hover,.footer-col button:hover,.footer-link-btn:hover{color:#fff}
.footer-bottom{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;font-size:.82rem;color:rgba(255,255,255,.45);max-width:1200px;margin:0 auto}

/* MODAL */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);backdrop-filter:blur(6px);z-index:1000;display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .2s ease}
.modal-overlay[hidden]{display:none}
.modal-box{background:#fff;border-radius:var(--radius-xl);padding:40px;max-width:460px;width:100%;max-height:90vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-xl);animation:slideUp .3s ease}
.modal-close-btn{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:50%;background:var(--bg);color:var(--text-muted);display:flex;align-items:center;justify-content:center;font-size:1.2rem;line-height:1;transition:all var(--transition)}
.modal-close-btn:hover{background:#fee2e2;color:var(--red)}
#modalContent h2{font-family:var(--font-display);font-size:1.6rem;font-weight:800;color:var(--navy);margin:12px 0 6px}
.modal-intro{color:var(--text-muted);margin-bottom:24px;font-size:.92rem}
.form-field{display:block;margin-bottom:16px}
.form-field span{display:block;font-size:.85rem;font-weight:600;margin-bottom:6px;color:var(--text)}
.form-field input,.form-field select,.form-field textarea{width:100%;border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:12px 14px;font-family:inherit;font-size:.92rem;outline:none;transition:border-color var(--transition);color:var(--text)}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:var(--blue)}
.form-submit{width:100%;padding:14px;border-radius:var(--radius);font-size:.95rem;margin-top:8px;justify-content:center}
.form-hint{font-size:.78rem;color:var(--text-muted);text-align:center;margin-top:12px}
.modal-switch{text-align:center;font-size:.88rem;margin-top:14px;color:var(--text-muted)}
.inline-button{color:var(--blue);font-weight:700;background:none;border:none;cursor:pointer;font-size:.88rem;text-decoration:underline}

/* TOAST */
.toast-msg{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--navy);color:#fff;padding:14px 24px;border-radius:999px;font-size:.88rem;font-weight:600;z-index:2000;transition:transform .3s ease;white-space:nowrap;box-shadow:var(--shadow-lg)}
.toast-msg.show{transform:translateX(-50%) translateY(0)}

/* ANIMATIONS */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* RESPONSIVE */
@media(max-width:1024px){
  .hero-inner{grid-template-columns:1fr;gap:40px;text-align:center}
  .hero-visual{display:none}
  .hero-stats{justify-content:center}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .project-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto 24px}
  .rate-container{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .main-nav{display:none;position:fixed;top:65px;left:0;right:0;bottom:0;background:#fff;flex-direction:column;align-items:stretch;padding:20px;gap:4px;overflow-y:auto;z-index:90;border-top:1px solid var(--border)}
  .main-nav.open{display:flex}
  .nav-link{padding:14px 16px;font-size:1rem;min-height:48px}
  .nav-actions{flex-direction:column;margin-left:0;margin-top:16px}
  .nav-actions .btn{width:100%;justify-content:center;min-height:48px}
  .hamburger{display:flex}
  .steps-grid{flex-direction:column;gap:32px}
  .step-connector{width:2px;height:40px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;gap:8px;text-align:center}
  .hero{padding:60px 0 80px;min-height:auto}
  .features-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){
  .hero-actions{flex-direction:column}
  .hero-stats{gap:14px}
  .features-grid{grid-template-columns:1fr}
}

/* ==========================================
   MOBILE-FIRST IMPROVEMENTS
   ========================================== */

/* Touch-friendly minimum sizes */
@media(max-width:768px){
  button,
  .btn,
  input[type="submit"],
  select { min-height:44px; }
  .btn-primary,.btn-ghost,.btn-outline-white { padding:12px 20px; font-size:.95rem; }
  .announcement-bar { font-size:.78rem; padding:8px 12px; }
  .brand-text { font-size:.95rem; }
  .header-inner { padding:10px 16px; gap:10px; }
}

/* Modal improvements for mobile */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 1000;
  display: flex;
  align-items: flex-end; /* slide up from bottom on mobile */
  justify-content: center;
  padding: 0;
  animation: fadeIn .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.modal-overlay[hidden] { display: none; }

.modal-box {
  background: #fff;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0; /* bottom sheet on mobile */
  padding: 22px 20px max(24px, env(safe-area-inset-bottom, 24px));
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
  box-shadow: 0 -8px 40px rgba(0,0,0,.2);
  animation: slideUpSheet .3s cubic-bezier(0.34,1.2,0.64,1);
}
.modal-box::-webkit-scrollbar {
  width: 4px;
}
.modal-box::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

/* Pull indicator on mobile modal */
.modal-box::before {
  content: '';
  display: block;
  width: 36px; height: 4px;
  background: #cbd5e1;
  border-radius: 2px;
  margin: 0 auto 12px;
}

@media(min-width:600px){
  /* On tablet+ show centered card instead of bottom sheet */
  .modal-overlay {
    align-items: center;
    padding: 20px;
  }
  .modal-box {
    max-width: 480px;
    border-radius: var(--radius-xl);
    padding: 32px 28px;
    animation: slideUp .3s ease;
    box-shadow: var(--shadow-xl);
    max-height: 90vh;
  }
  .modal-box::before { display: none; }
}

/* Inputs more touch-friendly */
.form-field input,
.form-field select,
.form-field textarea {
  min-height: 48px;
  font-size: 1rem; /* prevents iOS zoom on focus */
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--radius-sm);
}

.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* Checkbox better tap area */
input[type="checkbox"] {
  width: 18px; height: 18px;
  cursor: pointer;
  accent-color: #2563eb;
  flex-shrink: 0;
}

/* Prevent double-tap zoom on buttons */
button { touch-action: manipulation; }

/* Safe area insets for iOS home bar */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .site-footer { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

/* Smooth scroll on mobile */
html { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }

/* Better touch scrolling for review carousel */
.reviews-track { -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; }
.review-card { scroll-snap-align: start; }

/* Payouts table scroll on mobile */
.payouts-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

@keyframes slideUpSheet {
  from { transform: translateY(60px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* Fix for very small phones (320px) */
@media(max-width:360px){
  .hero-copy h1 { font-size: 1.8rem; }
  .section-heading h2 { font-size: 1.5rem; }
  .hero-stats { flex-direction: column; gap: 10px; }
  .stat-divider { display: none; }
  .btn-xl { padding: 12px 20px; font-size: .9rem; }
  .hero { padding: 50px 0 70px; }
}

/* Admin panel mobile improvements */
@media(max-width:768px){
  .admin-topbar { padding: 12px 16px; }
  .admin-content { padding: 14px; }
  .admin-modal { padding: 22px 16px; }
  .admin-login-card { padding: 32px 24px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .admin-table th, .admin-table td { padding: 10px 12px; font-size: .8rem; }
  .action-btns { flex-wrap: wrap; }
  .profile-form-grid { grid-template-columns: 1fr !important; }
}
@media(max-width:480px){
  .stats-grid { grid-template-columns: 1fr !important; }
  .admin-login-card { padding: 28px 18px; }
  .modal-footer-btns { flex-direction: column; }
  .modal-footer-btns .admin-btn { width: 100%; justify-content: center; }
  .admin-form-group input,
  .admin-field-group input,
  .admin-field-group select,
  .admin-field-group textarea { font-size: 1rem; min-height: 46px; }
}

/* DEMO MODAL WORKSPACE & 5-PAGE INTERFACE */
.demo-modal-box {
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 30px;
  max-width: 820px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  animation: slideUp .3s ease;
}
.demo-header-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .78rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  margin-bottom: 8px;
}
.demo-page-tabs {
  display: flex;
  gap: 8px;
  margin: 16px 0 20px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
}
.demo-page-tab-btn {
  flex: 1;
  min-width: 105px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  font-size: .85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .2s ease;
}
.demo-page-tab-btn:hover {
  border-color: #94a3b8;
  background: #f1f5f9;
}
.demo-page-tab-btn.active {
  background: #0f172a;
  border-color: #0f172a;
  color: #fff;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}
.demo-page-tab-btn.active.green {
  background: #16a34a;
  border-color: #16a34a;
}
.demo-page-tab-btn.active.gold {
  background: #d97706;
  border-color: #d97706;
}
.demo-page-tab-btn.completed {
  border-color: #86efac;
  color: #166534;
  background: #f0fdf4;
}
.demo-page-tab-btn.active.completed {
  background: #16a34a;
  color: #fff;
}
.demo-doc-sheet {
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 16px;
  font-family: 'Courier New', Courier, monospace;
  font-size: .88rem;
  line-height: 1.7;
  color: #1e293b;
  white-space: pre-wrap;
  margin-bottom: 16px;
  max-height: 200px;
  overflow-y: auto;
  user-select: text;
}
.demo-typing-box {
  width: 100%;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 14px;
  font-size: .92rem;
  line-height: 1.6;
  font-family: inherit;
  outline: none;
  transition: border-color .2s;
}
.demo-typing-box:focus {
  border-color: #2563eb;
}
.demo-stats-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .82rem;
  color: #64748b;
  margin-top: 8px;
  flex-wrap: wrap;
  gap: 8px;
}
.demo-record-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.demo-record-cell strong {
  display: block;
  font-size: .72rem;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.demo-record-cell span {
  font-size: .88rem;
  color: #1e293b;
  font-weight: 600;
}
.demo-form-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.demo-success-alert {
  background: #f0fdf4;
  border: 1.5px solid #86efac;
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  gap: 12px;
  animation: fadeIn .3s ease;
}
.demo-footer-cta {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px 20px;
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #e2e8f0;
  flex-wrap: wrap;
  gap: 14px;
}
@media(max-width: 640px) {
  .demo-modal-box { padding: 20px 16px; }
  .demo-form-fields-grid { grid-template-columns: 1fr; }
  .demo-record-grid { grid-template-columns: 1fr; }
  .demo-footer-cta { flex-direction: column; text-align: center; }
  .demo-footer-cta .btn { width: 100%; justify-content: center; }
}