*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
    /* 🌸 Mahiru Cute Theme */

      --pink:    #ff9ecb;
      --pink2:   #ff6fb0;

      --peach:   #ffd1ba;

      --lav:     #d5c6ff;
      --lav2:    #bfaeff;

      --mint:    #c8f5e6;

      --sky:     #cde9ff;
      --sky2:    #9fd4ff;

      --yellow:  #fff4b8;

      --cream:   #fffdf9;
      --white:   #ffffff;

      /* ✨ Text (อ่านง่าย + น่ารัก) */
      --text:    #5a3e5f;
      --muted:   #b39bbf;

      /* 🎀 Soft background */
      --soft:    #f3eaff;

      /* 💖 Extra glow / highlight */
      --accent:  #ffbde0;
      --bubble:  #ffe6f2;
      }

    html { scroll-behavior: smooth; }

    body {
      font-family: 'Itim', cursive;
      background: var(--cream);
      color: var(--text);
      overflow-x: hidden;
    }

    body::before {
      content: '';
      position: fixed; inset: 0; z-index: 0; pointer-events: none;
      background:
        radial-gradient(ellipse 600px 500px at 10% 15%,  rgba(255,179,209,0.35) 0%, transparent 70%),
        radial-gradient(ellipse 500px 400px at 90% 10%,  rgba(201,184,255,0.35) 0%, transparent 70%),
        radial-gradient(ellipse 400px 500px at 80% 85%,  rgba(184,240,224,0.35) 0%, transparent 70%),
        radial-gradient(ellipse 500px 350px at 5%  80%,  rgba(184,224,255,0.30) 0%, transparent 70%),
        radial-gradient(ellipse 300px 300px at 50% 50%,  rgba(255,240,160,0.20) 0%, transparent 70%);
    }

    .bg-shapes { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
    .shape {
      position: absolute; border-radius: 50%; opacity: 0.18;
      animation: shape-float ease-in-out infinite;
    }
    @keyframes shape-float {
      0%,100% { transform: translateY(0) rotate(0deg) scale(1); }
      33%      { transform: translateY(-30px) rotate(120deg) scale(1.05); }
      66%      { transform: translateY(15px) rotate(240deg) scale(0.97); }
    }

    /* NAV */
    nav {
      position: fixed; top: 0; left: 0; right: 0; z-index: 500;
      height: 60px;
      display: flex; align-items: center; justify-content: space-between;
      padding: 0 2.5rem;
      background: rgba(255,250,244,0.82);
      backdrop-filter: blur(20px);
      border-bottom: 2px solid rgba(255,179,209,0.3);
    }
    .nav-logo {
      display: flex; align-items: center; gap: .6rem;
      font-family: 'Kanit', sans-serif; font-weight: 900; font-size: 1rem;
      color: var(--pink2); text-decoration: none;
    }
    .nav-logo-blob {
      width: 36px; height: 36px;
      background: linear-gradient(135deg, var(--pink), var(--lav));
      border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
      display: flex; align-items: center; justify-content: center; font-size: 1rem;
      box-shadow: 0 4px 14px rgba(255,133,179,0.4);
      animation: blob-morph 5s ease-in-out infinite;
    }
    @keyframes blob-morph {
      0%,100% { border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%; }
      25%      { border-radius: 40% 60% 45% 55% / 60% 40% 60% 40%; }
      50%      { border-radius: 50% 50% 60% 40% / 40% 60% 50% 50%; }
      75%      { border-radius: 55% 45% 40% 60% / 55% 45% 60% 40%; }
    }
    nav ul { display: flex; gap: .2rem; list-style: none; }
    nav ul li a {
      font-size: .83rem; color: var(--muted); padding: .3rem .85rem;
      border-radius: 20px; text-decoration: none; transition: all .2s;
    }
    nav ul li a:hover { color: var(--pink2); background: rgba(255,179,209,0.2); }
    .nav-cta {
      display: flex; align-items: center; gap: .4rem;
      background: linear-gradient(135deg, var(--pink), var(--lav));
      color: var(--white); font-size: .82rem; font-weight: 700;
      padding: .42rem 1.3rem; border-radius: 30px;
      text-decoration: none; transition: all .25s;
      box-shadow: 0 4px 16px rgba(255,133,179,0.35);
    }
    .nav-cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 24px rgba(255,133,179,0.5); }

    /* HERO */
    .hero {
      position: relative; z-index: 1; min-height: 100vh;
      display: flex; align-items: center; justify-content: center;
      padding: 80px 2rem 4rem;
    }
    .hero-inner {
      display: flex; align-items: center; gap: 5rem;
      max-width: 1080px; width: 100%;
    }

    /* AVATAR */
    .avatar-area {
      flex-shrink: 0;
      display: flex; flex-direction: column; align-items: center; gap: 1.2rem;
    }
    .avatar-wrap { position: relative; width: 280px; height: 280px; }

    .av-blob-ring {
      position: absolute; inset: -18px;
      background: linear-gradient(135deg, var(--pink), var(--lav), var(--mint), var(--sky), var(--pink));
      background-size: 300% 300%;
      border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
      animation: blob-morph 6s ease-in-out infinite, gradient-shift 4s linear infinite;
      box-shadow: 0 0 40px rgba(255,133,179,0.3);
    }
    @keyframes gradient-shift {
      0%   { background-position: 0% 50%; }
      50%  { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .av-blob-ring2 {
      position: absolute; inset: -6px;
      background: var(--cream);
      border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
      animation: blob-morph 6s ease-in-out infinite;
    }
    .avatar-img-wrap {
      position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
      border: 4px solid var(--white);
      box-shadow: 0 8px 32px rgba(255,133,179,0.2);
    }
    .avatar-img { width: 100%; height: 100%; object-fit: cover; }

    .av-star {
      position: absolute; font-size: 1.1rem; pointer-events: none;
      animation: star-orbit ease-in-out infinite;
    }
    .av-star:nth-child(3) { animation-duration: 8s;  top: 10px;  left: 10px; }
    .av-star:nth-child(4) { animation-duration: 11s; top: 10px;  right: 10px; animation-delay: -3s; }
    .av-star:nth-child(5) { animation-duration: 9s;  bottom: 10px; left: 15px; animation-delay: -6s; }
    .av-star:nth-child(6) { animation-duration: 12s; bottom: 10px; right: 15px; animation-delay: -1s; }
    @keyframes star-orbit {
      0%,100% { transform: translateY(0) scale(1); opacity: 1; }
      50%      { transform: translateY(-14px) scale(1.3); opacity: .7; }
    }

    .avatar-status {
      display: flex; align-items: center; gap: .6rem;
      background: var(--white); border: 2px solid rgba(255,179,209,0.4);
      border-radius: 30px; padding: .4rem 1.3rem;
      font-size: .73rem; color: var(--muted);
      box-shadow: 0 4px 16px rgba(255,133,179,0.12);
    }
    .dot-online {
      width: 7px; height: 7px; border-radius: 50%; background: #5dda9b;
      box-shadow: 0 0 6px rgba(93,218,155,0.7);
      animation: pulse-green 2s infinite;
    }
    @keyframes pulse-green {
      0%,100% { transform: scale(1); }
      50%      { transform: scale(1.4); }
    }

    /* HERO TEXT */
    .hero-text { flex: 1; }
    .hero-tag {
      display: inline-flex; align-items: center; gap: .4rem;
      background: linear-gradient(135deg, rgba(255,179,209,0.3), rgba(201,184,255,0.3));
      border: 1.5px solid rgba(255,133,179,0.3);
      border-radius: 30px; padding: .3rem 1rem;
      font-size: .72rem; color: var(--pink2); font-weight: 700;
      margin-bottom: 1rem; animation: fadeUp .5s ease both;
    }
    .hero-title {
      font-family: 'Kanit', sans-serif; font-weight: 900;
      font-size: clamp(2.4rem, 5vw, 4rem);
      line-height: 1.05; margin-bottom: .5rem;
      animation: fadeUp .5s .08s ease both;
    }
    .hero-title .t1 { display: block; color: var(--text); }
    .hero-title .t2 {
      display: block;
      background: linear-gradient(90deg, var(--pink2), var(--lav2), var(--sky2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .hero-sub {
      font-size: .92rem; color: var(--muted); line-height: 1.8;
      margin-bottom: 1.8rem; min-height: 1.6rem;
      animation: fadeUp .5s .16s ease both;
    }
    #typed { 
    color: var(--pink2); 
    font-weight: 700; 
    font-size: 1.05rem; /* 👈 เพิ่ม */ 
    line-height: 2;
    text-shadow: 0 0 8px rgba(255,158,203,0.4); /* ✨ glow เบาๆ */
  }

    .hero-stats {
      display: flex; gap: .7rem; flex-wrap: wrap;
      margin-bottom: 2rem; animation: fadeUp .5s .24s ease both;
    }
    .stat-pill {
      background: var(--white); border: 2px solid rgba(255,179,209,0.3);
      border-radius: 20px; padding: .65rem 1.3rem; text-align: center;
      box-shadow: 0 4px 14px rgba(255,133,179,0.1); transition: transform .2s;
    }
    .stat-pill:hover { transform: translateY(-3px) rotate(-1deg); }
    .stat-pill .num {
      font-family: 'Kanit', sans-serif; font-size: 1.4rem; font-weight: 900;
      background: linear-gradient(135deg, var(--pink2), var(--lav2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      line-height: 1;
    }
    .stat-pill .lbl { font-size: .64rem; color: var(--muted); margin-top: .15rem; }

    .hero-btns {
      display: flex; gap: .8rem; flex-wrap: wrap;
      animation: fadeUp .5s .32s ease both;
    }
    .btn {
      display: inline-flex; align-items: center; gap: .45rem;
      padding: .72rem 1.6rem; border-radius: 30px;
      font-family: 'Itim', cursive; font-size: .92rem;
      text-decoration: none; transition: all .25s;
      border: 2px solid transparent; cursor: pointer;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--pink), var(--lav));
      color: var(--white);
      box-shadow: 0 6px 20px rgba(255,133,179,0.35);
    }
    .btn-primary:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 10px 28px rgba(255,133,179,0.5); }
    .btn-soft {
      background: var(--white); border-color: rgba(201,184,255,0.5); color: var(--lav2);
      box-shadow: 0 4px 14px rgba(201,184,255,0.15);
    }
    .btn-soft:hover { background: rgba(201,184,255,0.12); transform: translateY(-3px); }

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

    /* WAVY */
    .wavy { position: relative; z-index: 1; line-height: 0; }
    .wavy svg { display: block; width: 100%; }

    /* SECTIONS */
    section { position: relative; z-index: 1; padding: 5rem 2rem; }
    #features { background: var(--white); }
    #commands { background: linear-gradient(160deg, #fdf0f8, #f5f0ff, #f0fbff); }
    #dev      { background: var(--white); }

    .container { max-width: 1020px; margin: 0 auto; }

    .sec-header { text-align: center; margin-bottom: 3rem; }
    .sec-tag {
      display: inline-block;
      background: linear-gradient(135deg, rgba(255,179,209,0.25), rgba(201,184,255,0.25));
      border: 1.5px solid rgba(255,133,179,0.25);
      border-radius: 20px; padding: .2rem .9rem;
      font-size: .7rem; color: var(--pink2); font-weight: 700;
      margin-bottom: .7rem; letter-spacing: .06em;
    }
    .sec-title {
      font-family: 'Kanit', sans-serif; font-weight: 900;
      font-size: clamp(1.6rem, 3vw, 2.2rem);
      color: var(--text); margin-bottom: .3rem;
    }
    .sec-title .accent {
      background: linear-gradient(90deg, var(--pink2), var(--lav2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
    }
    .sec-sub { color: var(--muted); font-size: .84rem; }

    /* FEATURES */
    .features-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; }
    .feat-card {
      border: 2px solid transparent; border-radius: 24px; padding: 2rem 1.5rem;
      transition: all .3s; position: relative; overflow: hidden; cursor: default;
    }
    .feat-card:nth-child(1) { background: linear-gradient(145deg,#fff0f6,#fff8fc); border-color: rgba(255,133,179,0.2); }
    .feat-card:nth-child(2) { background: linear-gradient(145deg,#f5f0ff,#faf8ff); border-color: rgba(201,184,255,0.2); }
    .feat-card:nth-child(3) { background: linear-gradient(145deg,#f0faff,#f8fdff); border-color: rgba(184,224,255,0.2); }
    .feat-card:nth-child(4) { background: linear-gradient(145deg,#f0fff8,#f8fffc); border-color: rgba(184,240,224,0.2); }
    .feat-card:nth-child(5) { background: linear-gradient(145deg,#fffaf0,#fffdf8); border-color: rgba(255,214,176,0.2); }
    .feat-card:nth-child(6) { background: linear-gradient(145deg,#fff8f0,#fffcf8); border-color: rgba(255,179,209,0.2); }
    .feat-card:hover { transform: translateY(-6px) rotate(-0.5deg); box-shadow: 0 16px 40px rgba(0,0,0,0.07); }
    .feat-card:hover .feat-icon-wrap { transform: scale(1.15) rotate(10deg); }

    .feat-icon-wrap {
      width: 56px; height: 56px; border-radius: 18px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.6rem; margin-bottom: 1.1rem;
      transition: transform .3s; box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    }
    .feat-card:nth-child(1) .feat-icon-wrap { background: linear-gradient(135deg,#ffd6e8,#ffb3d1); }
    .feat-card:nth-child(2) .feat-icon-wrap { background: linear-gradient(135deg,#e0d8ff,#c9b8ff); }
    .feat-card:nth-child(3) .feat-icon-wrap { background: linear-gradient(135deg,#d6eeff,#b8e0ff); }
    .feat-card:nth-child(4) .feat-icon-wrap { background: linear-gradient(135deg,#c8f8e8,#b8f0e0); }
    .feat-card:nth-child(5) .feat-icon-wrap { background: linear-gradient(135deg,#ffe8c8,#ffd6b0); }
    .feat-card:nth-child(6) .feat-icon-wrap { background: linear-gradient(135deg,#ffd6e8,#ffb3d1); }

    .feat-card h3 {
      font-family: 'Kanit', sans-serif; font-size: .97rem; font-weight: 700;
      color: var(--text); margin-bottom: .45rem;
    }
    .feat-card p { color: var(--muted); font-size: .81rem; line-height: 1.7; }

    /* COMMANDS */
    .cmd-list { display: flex; flex-direction: column; gap: .8rem; }
    .cmd-card {
      background: var(--white); border: 2px solid rgba(255,179,209,0.2);
      border-radius: 18px; padding: 1.1rem 1.5rem;
      display: flex; align-items: center; gap: 1.1rem;
      transition: all .25s; position: relative; overflow: hidden;
    }
    .cmd-card::before {
      content: '';
      position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
      background: linear-gradient(180deg, var(--pink), var(--lav));
      border-radius: 4px 0 0 4px;
      transform: scaleY(0); transform-origin: bottom; transition: transform .25s;
    }
    .cmd-card:hover { border-color: rgba(255,133,179,0.4); transform: translateX(6px); box-shadow: 0 6px 20px rgba(255,133,179,0.1); }
    .cmd-card:hover::before { transform: scaleY(1); }
    .cmd-icon-wrap {
      width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0;
      background: linear-gradient(135deg,rgba(255,179,209,0.3),rgba(201,184,255,0.3));
      display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
    }
    .cmd-name {
      font-family: 'Kanit', sans-serif; font-size: .93rem; font-weight: 700;
      color: var(--pink2); min-width: 135px;
    }
    .cmd-desc { flex: 1; color: var(--muted); font-size: .81rem; line-height: 1.5; }
    .cmd-badge {
      font-size: .64rem; padding: .2rem .7rem; border-radius: 20px;
      font-weight: 700; white-space: nowrap; flex-shrink: 0;
    }
    .badge-all   { background: rgba(255,179,209,0.2); color: var(--pink2); border: 1.5px solid rgba(255,133,179,0.3); }
    .badge-admin { background: rgba(184,240,224,0.3); color: #2db88a;     border: 1.5px solid rgba(125,232,200,0.4); }
    .badge-owner { background: rgba(255,240,160,0.4); color: #c8960a;     border: 1.5px solid rgba(255,214,50,0.4); }

    /* DEV */
    .dev-card {
      max-width: 720px; margin: 0 auto;
      background: linear-gradient(145deg,#fff5fa,#fff8ff);
      border: 2px solid rgba(255,179,209,0.25);
      border-radius: 32px; padding: 2.8rem 2.5rem;
      display: flex; align-items: center; gap: 3rem;
      box-shadow: 0 10px 50px rgba(255,133,179,0.1);
      position: relative; overflow: visible;
    }
    .dev-card::before {
      content: '';
      position: absolute; top: -20px; right: -20px; width: 120px; height: 120px;
      background: linear-gradient(135deg,rgba(255,179,209,0.3),rgba(201,184,255,0.3));
      border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
      animation: blob-morph 7s ease-in-out infinite; z-index: 0;
    }
    .dev-card::after {
      content: '';
      position: absolute; bottom: -15px; left: -15px; width: 90px; height: 90px;
      background: linear-gradient(135deg,rgba(184,240,224,0.35),rgba(184,224,255,0.35));
      border-radius: 40% 60% 45% 55% / 60% 40% 55% 45%;
      animation: blob-morph 9s ease-in-out infinite reverse; z-index: 0;
    }

    .dev-avatar-outer {
      flex-shrink: 0; position: relative; width: 160px; height: 160px; z-index: 1;
    }
    .dev-crown {
      position: absolute; top: -26px; left: 50%; transform: translateX(-50%);
      font-size: 1.8rem; z-index: 10;
      filter: drop-shadow(0 4px 8px rgba(255,200,0,0.4));
      animation: crown-float 3.5s ease-in-out infinite;
    }
    @keyframes crown-float {
      0%,100% { transform: translateX(-50%) translateY(0); }
      50%      { transform: translateX(-50%) translateY(-8px); }
    }
    .dev-blob-ring {
      position: absolute; inset: -14px;
      background: linear-gradient(135deg,var(--pink),var(--lav),var(--mint),var(--sky),var(--peach),var(--pink));
      background-size: 400% 400%;
      border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
      animation: blob-morph 5s ease-in-out infinite, gradient-shift 5s linear infinite;
      box-shadow: 0 0 30px rgba(255,133,179,0.3);
    }
    .dev-blob-ring2 {
      position: absolute; inset: -5px; background: var(--white);
      border-radius: 60% 40% 55% 45% / 50% 60% 40% 50%;
      animation: blob-morph 5s ease-in-out infinite;
    }
    .dev-img-wrap {
      position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
      border: 3px solid var(--white);
      box-shadow: 0 6px 24px rgba(255,133,179,0.2);
    }
    .dev-img { width: 100%; height: 100%; object-fit: cover; }

    .dev-info { flex: 1; position: relative; z-index: 1; }
    .dev-label { font-size: .67rem; color: var(--pink2); font-weight: 700; letter-spacing: .12em; margin-bottom: .35rem; text-transform: uppercase; }
    .dev-name { font-family: 'Kanit', sans-serif; font-size: 1.7rem; font-weight: 900; color: var(--text); margin-bottom: .1rem; line-height: 1.1; }
    .dev-role { font-size: .77rem; color: var(--muted); margin-bottom: 1rem; }
    .dev-desc { font-size: .84rem; color: var(--muted); line-height: 1.75; margin-bottom: 1.3rem; }
    .dev-btns { display: flex; gap: .7rem; flex-wrap: wrap; }

    /* FOOTER */
    footer {
      position: relative; z-index: 1;
      background: linear-gradient(160deg,#fef0f8,#f8f0ff);
      padding: 2.2rem; text-align: center;
      border-top: 2px solid rgba(255,179,209,0.2);
    }
    .footer-logo {
      font-family: 'Kanit', sans-serif; font-weight: 900; font-size: 1rem;
      background: linear-gradient(90deg,var(--pink2),var(--lav2));
      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
      margin-bottom: .8rem; display: inline-block;
    }

    .footer-links { display: flex; justify-content: center; gap: 1.8rem; margin-bottom: .8rem; }
    .footer-links a { color: var(--muted); font-size: .78rem; text-decoration: none; transition: color .2s; }
    .footer-links a:hover { color: var(--pink2); }
    .footer-copy { color: var(--muted); font-size: .7rem; opacity: .6; }

    /* REVEAL */
    .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    /* RESPONSIVE */
    @media (max-width: 880px) {
      .hero-inner { flex-direction: column; gap: 2.5rem; text-align: center; }
      .hero-stats { justify-content: center; }
      .hero-btns  { justify-content: center; }
      .features-grid { grid-template-columns: 1fr 1fr; }
      .dev-card { flex-direction: column; text-align: center; gap: 2rem; overflow: hidden; }
      .dev-btns { justify-content: center; }
    }
    @media (max-width: 560px) {
      nav ul { display: none; }
      .features-grid { grid-template-columns: 1fr; }
      .cmd-card { flex-wrap: wrap; }
      .cmd-name { min-width: unset; }
    }

    .nav-logo-img {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 8px;

    /* ✨ เพิ่มความน่ารัก */
    border: 2px solid rgba(255,179,209,0.5);
    box-shadow: 0 4px 12px rgba(255,133,179,0.35);
    transition: all .25s ease;
  }

  .nav-logo:hover .nav-logo-img {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 8px 20px rgba(255,133,179,0.5);
  }

  .cursor {
    display: inline-block;
    margin-left: 3px;
    animation: blink 1s infinite;
  }

  @keyframes blink {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
  }