/* Started What We Do */
  :root{
    --purple:#7C5CE0;
    --purple-dark:#5B3FC4;
    --ink:#1F2430;
    --muted:#6B7280;
    --page:#F7F6FB;
    --card:#FFFFFF;
    --paper:#FBFAF6;
    --line:#E4DEF5;
    --c-student:#E0954D;
    --c-teacher:#2F5D50;
    --c-inventory:#2F9DA6;
    --c-exam:#6B62C2;
    --c-library:#B1495E;
    --c-hostel:#C1594B;
    --c-transport:#3E7CB1;
    --c-fee:#2F8E5C;
    --c-timetable:#4859A0;
    --r-entrance: 720ms;
  }
 
  *{box-sizing:border-box;}
 
  body{
    margin:0;
    font-family:'Inter',sans-serif;
  }
 
  .stage-what-wedo{
    position:relative;
    overflow:hidden;
    padding:64px 20px 72px;
    background:
      radial-gradient(ellipse 60% 50% at 12% 8%, rgba(224,149,77,.10), transparent 60%),
      radial-gradient(ellipse 55% 45% at 92% 18%, rgba(47,157,166,.12), transparent 60%),
      radial-gradient(ellipse 60% 50% at 50% 100%, rgba(124,92,224,.10), transparent 60%),
      linear-gradient(180deg,#F4F1FC 0%,#F7F6FB 45%,#F2F7F5 100%);
  }
 
  .grid-tex{
    position:absolute; inset:0;
    background-image:
      linear-gradient(var(--line) 1px, transparent 1px),
      linear-gradient(90deg, var(--line) 1px, transparent 1px);
    background-size:34px 34px;
    opacity:.35;
    mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 75%);
    -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%, #000 0%, transparent 75%);
  }
 
  .doodles{
    position:absolute; inset:0;
    pointer-events:none;
  }
  .doodles svg{
    position:absolute;
    stroke:var(--purple);
    fill:none;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    animation:drift 7s ease-in-out infinite;
  }
  .d1{ top:6%;  left:5%;  width:46px; opacity:.4; color:var(--c-hostel); stroke:var(--c-hostel); animation-delay:0s; }
  .d2{ top:14%; left:88%; width:40px; opacity:.35; color:var(--c-inventory); stroke:var(--c-inventory); animation-delay:.8s; }
  .d3{ top:70%; left:3%;  width:44px; opacity:.32; color:var(--c-fee); stroke:var(--c-fee); animation-delay:1.6s; }
  .d4{ top:80%; left:92%; width:38px; opacity:.35; color:var(--purple); stroke:var(--purple); animation-delay:.4s; }
  .d5{ top:42%; left:1.5%; width:30px; opacity:.28; color:var(--c-timetable); stroke:var(--c-timetable); animation-delay:1.2s; }
  .d6{ top:2%;  left:47%;  width:34px; opacity:.3; color:var(--c-teacher); stroke:var(--c-teacher); animation-delay:2s; }
 
  @keyframes drift{
    0%,100%{ transform:translateY(0) rotate(0deg); }
    50%{ transform:translateY(-10px) rotate(4deg); }
  }
 
  @media (prefers-reduced-motion: reduce){
    .doodles svg{ animation:none; }
  }
 
  @media (max-width:640px){
    .doodles{ display:none; }
  }
 
  .panel{
    position:relative;
    z-index:2;
    width:100%;
    max-width:900px;
    margin:0 auto;
  }
 
  .eyebrow{
    display:flex;
    align-items:center;
    gap:8px;
    color:var(--purple-dark);
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:13px;
    letter-spacing:.08em;
    text-transform:uppercase;
    margin:0 0 8px 2px;
  }
  .eyebrow::before{
    content:"";
    width:22px;height:3px;border-radius:2px;
    background:var(--purple);
  }
 
  h1{
    font-family:'Poppins',sans-serif;
    font-weight:700;
    font-size:clamp(24px,4vw,34px);
    color:var(--ink);
    margin:0 0 28px 2px;
  }
 
  /* ============= CLUSTER ============= */
  .cluster{
    position:relative;
    width:100%;
    max-width:640px;
    aspect-ratio:1/1;
    margin:0 auto;
  }
 
  .cluster.play .center,
  .cluster.play .petal{
    animation-play-state:running;
  }
 
  .connectors{
    position:absolute; inset:0;
    width:100%; height:100%;
    pointer-events:none;
  }
  .connectors path{
    fill:none;
    stroke:var(--purple);
    stroke-width:1.4;
    stroke-dasharray:6 6;
    opacity:.28;
    stroke-dashoffset:0;
    animation:dash 14s linear infinite;
  }
  @keyframes dash{ to{ stroke-dashoffset:-240; } }
 
  /* Center dashboard blob */
  .center{
    position:absolute;
    top:50%; left:50%;
    width:34%; aspect-ratio:1/1;
    transform:translate(-50%,-50%) scale(0);
    border-radius:50%;
    background:linear-gradient(160deg,var(--purple) 0%,var(--purple-dark) 100%);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 18px 40px -14px rgba(91,63,196,.55);
    z-index:5;
    opacity:0;
    animation:pop-in 600ms cubic-bezier(.34,1.56,.64,1) forwards, breathe 5s ease-in-out 1s infinite;
  }
  @keyframes pop-in{
    0%{opacity:0; transform:translate(-50%,-50%) scale(.4);}
    100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
  }
  @keyframes breathe{
    0%,100%{ box-shadow:0 18px 40px -14px rgba(91,63,196,.55); }
    50%{ box-shadow:0 22px 46px -12px rgba(91,63,196,.7); }
  }
 
  .mockup{
    width:66%; height:52%;
    background:#fff;
    border-radius:8px;
    padding:6%;
    display:flex; flex-direction:column; gap:8%;
    box-shadow:0 6px 16px rgba(0,0,0,.18);
  }
  .mockup .bar{ display:flex; gap:4px; }
  .mockup .bar span{ width:6px; height:6px; border-radius:50%; background:#E3E1F0; }
  .mockup .stat-row{ display:flex; gap:6%; flex:1; }
  .mockup .stat{ flex:1; border-radius:4px; }
  .mockup .stat:nth-child(1){ background:#EFEAFC; }
  .mockup .stat:nth-child(2){ background:#E3F6EF; }
  .mockup .stat:nth-child(3){ background:#FDF0E4; }
  .mockup .line{
    flex:1;
    border-radius:4px;
    background:linear-gradient(90deg,#EFEAFC,#E3F6EF);
    position:relative;
    overflow:hidden;
  }
  .mockup .line::after{
    content:"";
    position:absolute; left:0; bottom:0; width:100%; height:55%;
    background:linear-gradient(90deg,var(--purple) 0%,#8EE0C3 100%);
    clip-path:polygon(0 80%,15% 60%,30% 70%,45% 35%,60% 50%,75% 20%,90% 40%,100% 10%,100% 100%,0 100%);
    opacity:.85;
  }
 
  .center-label{
    position:absolute;
    bottom:-6%;
    left:50%; transform:translateX(-50%);
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:clamp(10px,1.6vw,13px);
    color:var(--purple-dark);
    background:#fff;
    padding:3px 10px;
    border-radius:20px;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
    white-space:nowrap;
  }
 
  /* Petals */
  .petal{
    position:absolute;
    width:30%; aspect-ratio:1/1;
    top:var(--y); left:var(--x);
    transform:translate(-50%,-50%) scale(0);
    border-radius:50%;
    background:var(--card);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    text-align:center;
    padding:3%;
    box-shadow:0 10px 24px -12px rgba(31,36,48,.22);
    cursor:default;
    opacity:0;
    animation:pop-in-petal 560ms cubic-bezier(.34,1.56,.64,1) forwards;
    animation-delay:calc(var(--i) * 90ms + 220ms);
    transition:transform 260ms ease, box-shadow 260ms ease;
    z-index:2;
  }
  .petal:hover{
    transform:translate(-50%,-50%) scale(1.08) translateY(-4px);
    box-shadow:0 16px 30px -10px rgba(31,36,48,.32);
    z-index:6;
  }
  @keyframes pop-in-petal{
    0%{opacity:0; transform:translate(-50%,-50%) scale(.3);}
    100%{opacity:1; transform:translate(-50%,-50%) scale(1);}
  }
 
  .icon-badge{
    width:34%; aspect-ratio:1/1;
    border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    color:#fff;
    margin-bottom:6%;
    transition:transform 260ms ease;
  }
  .petal:hover .icon-badge{ transform:scale(1.12) rotate(-4deg); }
  .icon-badge svg{ width:52%; height:52%; }
 
  .petal .title{
    font-family:'Poppins',sans-serif;
    font-weight:600;
    font-size:clamp(10px,1.65vw,13px);
    color:var(--ink);
    line-height:1.2;
  }
  .petal .sub{
    font-size:clamp(8px,1.15vw,10px);
    color:var(--muted);
    line-height:1.3;
    margin-top:2%;
    display:block;
  }
 
  .c-student .icon-badge{ background:var(--c-student); }
  .c-teacher .icon-badge{ background:var(--c-teacher); }
  .c-inventory .icon-badge{ background:var(--c-inventory); }
  .c-exam .icon-badge{ background:var(--c-exam); }
  .c-library .icon-badge{ background:var(--c-library); }
  .c-hostel .icon-badge{ background:var(--c-hostel); }
  .c-transport .icon-badge{ background:var(--c-transport); }
  .c-fee .icon-badge{ background:var(--c-fee); }
  .c-timetable .icon-badge{ background:var(--c-timetable); }
 
  /* ============= RESPONSIVE: MOBILE GRID ============= */
  @media (max-width:760px){
    .connectors{ display:none; }
    .cluster{
      aspect-ratio:auto;
      max-width:480px;
    }
    .center{
      position:relative;
      width:100%; aspect-ratio:16/9;
      top:auto; left:auto; transform:none;
      border-radius:20px;
      margin-bottom:16px;
      animation:fade-up 560ms ease forwards, breathe 5s ease-in-out 1s infinite;
    }
    .center-label{ bottom:8%; }
    @keyframes fade-up{
      0%{opacity:0; transform:translateY(14px);}
      100%{opacity:1; transform:translateY(0);}
    }
    .petals-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:10px;
    }
    .petal{
      position:static;
      width:100%; aspect-ratio:1/1;
      transform:none;
      animation:fade-up 520ms ease forwards;
      animation-delay:calc(var(--i) * 70ms + 160ms);
      padding:10%;
      border-radius:18px;
    }
    .petal:hover{ transform:translateY(-3px); }
    .petal .sub{ display:none; }
  }
 
  @media (max-width:420px){
    .petals-grid{ grid-template-columns:repeat(2,1fr); }
  }
 
  @media (prefers-reduced-motion: reduce){
    .center,.petal{ animation:none !important; opacity:1 !important; transform:translate(-50%,-50%) scale(1) !important; }
    .connectors path{ animation:none; }
    @media (max-width:760px){
      .center,.petal{ transform:none !important; }
    }
  }
/* end What We Do */