/* =========================================================
   EduSewa — Home (index.css)
   Covers: hero, trust row, portals, benefits, how, testimonials, FAQ, CTA
   ========================================================= */

:root{
  /* Brand & UI tokens */
  --bg:#f8fafc;
  --ink:#0b1220;
  --muted:#475569;
  --line:rgba(15,23,42,.08);
  --card:#ffffff;

  --primary:#2563eb;    /* Blue */
  --primary-600:#1d4ed8;
  --accent:#7c3aed;     /* Violet for subtle gradients */
  --success:#059669;    /* Green */
  --warning:#f59e0b;    /* Amber */

  --shadow-sm:0 6px 20px rgba(2,6,23,.06);
  --shadow-md:0 12px 28px rgba(2,6,23,.10);
  --shadow-lg:0 16px 40px rgba(2,6,23,.14);

  --radius-lg:20px;
  --radius-md:14px;
  --radius-sm:10px;
}

/* Base layout */
html,body{height:100%;}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);
  background:#fbfcff;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.container{max-width:1160px;margin:0 auto;padding:0 20px;}

/* Buttons */
.btn{
  --btn-bg:#fff;
  --btn-fg:#0b1220;
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;padding:12px 18px;border-radius:12px;
  font-weight:700;text-decoration:none;color:var(--btn-fg);
  border:1px solid var(--line);background:var(--btn-bg);
  box-shadow:var(--shadow-sm);
  transition:transform .15s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md);}
.btn:focus-visible{outline:3px solid color-mix(in srgb, var(--primary) 30%, transparent);outline-offset:2px;}
.btn--primary{
  --btn-bg:linear-gradient(180deg,var(--primary),var(--primary-600));
  --btn-fg:#fff;border-color:transparent;box-shadow:0 10px 24px rgba(37,99,235,.35);
}
.btn--primary:hover{box-shadow:0 14px 28px rgba(37,99,235,.45);}
.btn--ghost{
  --btn-bg:linear-gradient(180deg,#fff,#f7fbff);
  --btn-fg:#0b1220;border-color:var(--line);
}

/* Sections */
.section{padding:64px 0;}
.section__head{margin-bottom:22px;}
.section__title{
  margin:0 0 6px;font-size:clamp(22px,2.6vw,28px);line-height:1.2;color:var(--ink);
}
.section__sub{margin:0;color:var(--muted);}

/* Grid helpers */
.grid-3{display:grid;gap:22px;grid-template-columns:repeat(3,minmax(0,1fr));}
@media (max-width:980px){.grid-3{grid-template-columns:1fr;}}

/* Card base */
.card{
  position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:rgba(15,23,42,.12);}
.card h3{margin:6px 0 8px;font-size:18px;}
.card p{margin:0;color:#334155;}

/* ========================= HERO ========================= */
.hero{
  padding:88px 0 48px;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,58,237,.08), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(37,99,235,.10), transparent 60%),
    linear-gradient(180deg,#f8fbff,#f4f7ff 45%, #f7f9ff 100%);
}
.hero__grid{display:grid;gap:36px;grid-template-columns:1.1fr .9fr;align-items:center;}
@media (max-width:980px){.hero__grid{grid-template-columns:1fr;}}
.hero__title{font-size:clamp(28px,4.6vw,44px);line-height:1.1;margin:0 0 12px;}
.hero__subtitle{color:var(--muted);font-size:clamp(15px,1.6vw,18px);margin:0 0 16px;}
.hero__ctas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
/* ---- Hero meta: Secure • Fast • Insightful ---- */
.hero__meta{
  display:flex;
  align-items:center;
  gap:16px;                 /* space between items */
  margin-top:8px;
  color:#64748b;            /* muted */
  font-size:14px;           /* smaller & professional */
  line-height:1.4;
  padding:0;
}
.hero__meta ul{margin:0;padding:0}
.hero__meta li{             /* when using <ul><li>…</li></ul> */
  list-style:none;
  margin:0;
  padding:0 0 0 12px;       /* room for the custom dot */
  position:relative;
}
.hero__meta li:first-child{padding-left:0}
.hero__meta li+li::before{
  content:"";
  width:4px;height:4px;
  border-radius:50%;
  background:#cbd5e1;       /* soft separator dot */
  position:absolute;left:4px;top:50%;
  transform:translateY(-50%);
}

/* also support <div class="hero__meta"><span>…</span><span>…</span>… */
.hero__meta span{display:inline-block;position:relative;padding-left:0}
.hero__meta span+span{padding-left:14px}
.hero__meta span+span::before{
  content:"";
  width:4px;height:4px;
  border-radius:50%;
  background:#cbd5e1;
  position:absolute;left:6px;top:50%;
  transform:translateY(-50%);
}

.hero__art{position:relative;min-height:260px;}
.blob{position:absolute;border-radius:999px;filter:blur(8px);opacity:.6;}
.blob--1{width:340px;height:340px;right:8%;top:-20px;background:radial-gradient(circle at 30% 30%, rgba(37,99,235,.18), rgba(124,58,237,.10));}
.blob--2{width:280px;height:280px;right:20%;top:120px;background:radial-gradient(circle at 70% 40%, rgba(16,185,129,.18), rgba(37,99,235,.08));}
.card-mock{
  position:absolute;right:6%;top:140px;width:min(520px,88%);height:120px;
  background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-md);
}
.card-mock__row{height:16px;margin:16px;border-radius:999px;background:linear-gradient(90deg,#edf2ff,#f7f9ff 60%,#edf2ff);}
.card-mock__row.short{width:60%}

/* ========================= TRUST ROW ========================= */
.trust{padding:18px 0 32px;background:transparent;}
.trust__grid{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;}
.trust__label{color:#64748b;margin:0;}
.trust__logos{display:flex;gap:14px;flex-wrap:wrap;align-items:center;}
.logo-skel{
  width:132px;height:32px;border-radius:10px;border:1px solid var(--line);background:#fff;
  position:relative;overflow:hidden;
}
.logo-skel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 0%,rgba(2,6,23,.05) 50%,transparent 100%);
  animation:shimmer 1.8s infinite;
}
@keyframes shimmer{0%{transform:translateX(-100%);}100%{transform:translateX(100%);}}

/* ========================= PORTALS ========================= */
.portals-v2{padding-top:56px;}
.portal-grid .portal{text-decoration:none;color:inherit;}
.chip{
  display:inline-block;padding:6px 10px;border-radius:999px;border:1px solid var(--line);
  font:700 12px/1 system-ui,-apple-system,Segoe UI,Roboto;color:var(--muted);
}
.chip--accent{color:var(--primary);background:color-mix(in srgb, var(--primary) 10%, #fff);border-color:color-mix(in srgb, var(--primary) 24%, transparent);}

.portal{
  --accent: var(--primary);
  background:
    radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--accent) 12%, #fff), transparent 55%),
    radial-gradient(140% 140% at 100% 0%, color-mix(in srgb, var(--accent) 10%, #fff), transparent 55%),
    #fff;
}
.portal::after{
  content:"";position:absolute;inset:-2px;border-radius:calc(var(--radius-lg) + 2px);
  background:linear-gradient(120deg, var(--accent), color-mix(in srgb, var(--accent) 40%, var(--accent)));
  opacity:0;filter:blur(16px);z-index:-1;transition:.22s;
}
.portal:hover::after{opacity:.16;filter:blur(20px);}
.portal__icon{
  width:64px;height:64px;border-radius:16px;display:grid;place-items:center;font-size:28px;
  margin:12px 0 10px;background:color-mix(in srgb, var(--accent) 14%, #f7faff);
  border:1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.portal__title{font-size:20px;}
.portal__text{font-size:15px;}
.portal__cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-weight:700;font-size:14px;
  padding:10px 14px;border-radius:12px;background:linear-gradient(180deg,#fff,#f7fbff);
  border:1px solid var(--line);box-shadow:var(--shadow-sm);
}
.portal__cta::after{content:"↗";transition:transform .18s ease;}
.portal:hover .portal__cta::after{transform:translateY(-1px) translateX(2px);}

/* per-portal accents */
.portal--teacher{ --accent:#2563eb; }
.portal--student{ --accent:#059669; }
.portal--admin  { --accent:#f59e0b; }

/* ========================= BENEFITS ========================= */
.benefits-v2 .card--feature .icon-chip{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:#f6f8ff;border:1px solid var(--line);margin-bottom:10px;font-size:18px;
}

/* HOW STEPS */
.card--step{position:relative;padding-left:62px}
.step-badge{
  position:absolute;left:20px;top:20px;
  display:grid;place-items:center;
  width:28px;height:28px;border-radius:999px;
  background:#eef2ff;border:1px solid #dde3ff;color:#334155;font-weight:700;font-size:14px;
}

/* ========================= TESTIMONIALS ========================= */
.testimonials-v2 .quote{padding:26px 26px 20px;}
.quote__mark{
  position:absolute;top:10px;left:16px;font-size:44px;line-height:1;
  color:color-mix(in srgb, var(--primary) 35%, #e8eeff);
  pointer-events:none;
}
.quote footer{margin-top:14px;color:#64748b;font-size:14px;}

/* ========================= FAQ ========================= */
.faq{padding:52px 0;}
.faq .section__title{margin-bottom:14px;}
.qa{
  border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:var(--shadow-sm);
  padding:0;margin:10px 0;overflow:hidden;
}
.qa > summary{
  list-style:none;cursor:pointer;padding:16px 18px;position:relative;font-weight:700;
  display:flex;align-items:center;gap:12px;
}
.qa > summary::-webkit-details-marker{display:none;}
.qa > summary::after{
  content:"+";margin-left:auto;font-weight:900;color:#1f2a44;transition:transform .18s ease;
}
.qa[open] > summary::after{transform:rotate(45deg);}
.qa > p{padding:0 18px 18px 18px;color:#334155;margin:0;}

/* ========================= CTA ========================= */
.cta{
  padding:54px 0;background:
  radial-gradient(800px 400px at 90% 120%, rgba(37,99,235,.08), transparent 60%),
  radial-gradient(600px 320px at 0% 0%, rgba(124,58,237,.07), transparent 60%),
  linear-gradient(180deg,#f7f9ff,#eef3ff);
  border-top:1px solid var(--line);
}
.cta__grid{display:grid;gap:16px;grid-template-columns:1.2fr .8fr;align-items:center;}
.cta__actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;}
.cta h3{margin:0 0 6px;font-size:clamp(18px,2.2vw,24px);}
.cta p{margin:0;color:#475569;}
@media (max-width:980px){
  .cta__grid{grid-template-columns:1fr;}
  .cta__actions{justify-content:flex-start;}
}

/* Motion sensitivity */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition:none !important;scroll-behavior:auto !important}
}