:root{
      --bg:#fff7fc;
      --pink:#ff6fb5;
      --violet:#8a5cf6;
      --muted:#b517a;
      --card:#ffffffcc;
      --orange:#ff8c42;
      --green:#4ecdc4;
      --yellow:#ffd93d;
      --blue:#6c5ce7;
      --red:#ff6b6b;
      --gradient1:linear-gradient(135deg, #ff6fb5, #8a5cf6);
      --gradient2:linear-gradient(135deg, #ff8c42, #ff6b6b);
      --gradient3:linear-gradient(135deg, #4ecdc4, #6c5ce7);
      --gradient4:linear-gradient(135deg, #ffd93d, #ff8c42);
    }
    *{box-sizing:border-box}html,body{height:100%;margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial;color:#2b1633;background:linear-gradient(180deg,var(--bg),#fff)}
    a{color:inherit;text-decoration:none}

    /* Animated background */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: 
        radial-gradient(circle at 20% 80%, rgba(255, 111, 181, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(138, 92, 246, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(255, 140, 66, 0.05) 0%, transparent 50%);
      z-index: -1;
      animation: backgroundShift 20s ease-in-out infinite;
    }

    @keyframes backgroundShift {
      0%, 100% { transform: translateX(0) translateY(0); }
      25% { transform: translateX(-10px) translateY(-5px); }
      50% { transform: translateX(5px) translateY(-10px); }
      75% { transform: translateX(-5px) translateY(5px); }
    }

    header{
      position:sticky;top:0;background:rgba(255,255,255,0.8);backdrop-filter:blur(12px);
      box-shadow:0 8px 32px rgba(138,92,246,0.1);padding:14px 22px;z-index:40;
      border-bottom: 1px solid rgba(255,111,181,0.1);
      animation: headerSlide 0.6s ease-out;
    }

    @keyframes headerSlide {
      from { transform: translateY(-100%); opacity: 0; }
      to { transform: translateY(0); opacity: 1; }
    }

    .wrap{max-width:1150px;margin:0 auto;padding:0 18px}
    .nav{display:flex;align-items:center;justify-content:space-between}
    .brand{display:flex;align-items:center;gap:12px;animation: brandPulse 2s ease-in-out infinite}
    
    @keyframes brandPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.02); }
    }

    .logo{
      width:50px;height:50px;border-radius:12px;background:var(--gradient1);
      color:white;display:grid;place-items:center;font-weight:800;
      animation: logoRotate 3s ease-in-out infinite;
      box-shadow: 0 4px 20px rgba(255,111,181,0.3);
    }

    @keyframes logoRotate {
      0%, 100% { transform: rotate(0deg) scale(1); }
      25% { transform: rotate(5deg) scale(1.05); }
      50% { transform: rotate(0deg) scale(1.1); }
      75% { transform: rotate(-5deg) scale(1.05); }
    }

    nav ul{display:flex;gap:12px;align-items:center;margin:0;padding:0;list-style:none}
    nav a{
      padding:8px 16px;border-radius:20px;font-weight:600;
      transition: all 0.3s ease;position:relative;overflow:hidden;
      background: linear-gradient(45deg, transparent, transparent);
    }
    
    nav a::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: var(--gradient1);
      transition: left 0.3s ease;
      z-index: -1;
    }
    
    nav a:hover::before { left: 0; }
    nav a:hover { color: white; transform: translateY(-2px); }

    .hero{
      display:grid;grid-template-columns:1fr 380px;gap:28px;align-items:start;padding:46px 0;
      animation: heroFadeIn 1s ease-out;
    }

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

    .kicker{
      display:inline-block;padding:8px 16px;border-radius:25px;
      background:var(--gradient2);color:white;font-weight:700;
      animation: kickerBounce 2s ease-in-out infinite;
      box-shadow: 0 4px 15px rgba(255,140,66,0.3);
    }

    @keyframes kickerBounce {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-3px); }
    }

    h1{
      font-size:34px;margin:14px 0 10px;line-height:1.06;
      background: var(--gradient1);-webkit-background-clip: text;
      -webkit-text-fill-color: transparent;background-clip: text;
      animation: titleGlow 3s ease-in-out infinite;
    }

    @keyframes titleGlow {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.1); }
    }

    .lead{color:var(--muted);margin-bottom:20px;animation: leadSlide 1.2s ease-out 0.3s both}
    
    @keyframes leadSlide {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .cta-row{display:flex;gap:12px;align-items:center}
    .btn{
      background:var(--gradient1);color:white;padding:12px 24px;border-radius:25px;
      border:0;font-weight:700;cursor:pointer;transition:all 0.3s ease;
      position:relative;overflow:hidden;box-shadow: 0 4px 20px rgba(255,111,181,0.3);
    }
    
    .btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
      transition: left 0.5s ease;
    }
    
    .btn:hover::before { left: 100%; }
    .btn:hover{transform:translateY(-3px) scale(1.05);box-shadow: 0 8px 30px rgba(255,111,181,0.4);}

    /* Right form */
    .enquiry{
      background:linear-gradient(180deg,rgba(255,255,255,0.95),rgba(255,255,255,0.85));
      padding:25px;border-radius:20px;box-shadow:0 15px 40px rgba(138,92,246,0.15);
      backdrop-filter:blur(10px);border:1px solid rgba(255,111,181,0.1);
      animation: formSlide 0.8s ease-out 0.4s both;
    }

    @keyframes formSlide {
      from { opacity: 0; transform: translateX(50px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .enquiry h3{
      margin:0 0 15px;background:var(--gradient1);-webkit-background-clip: text;
      -webkit-text-fill-color: transparent;background-clip: text;
      animation: titlePulse 2s ease-in-out infinite;
    }

    @keyframes titlePulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.02); }
    }

    .field{margin-bottom:15px;position:relative}
    .field label{
      display:block;font-size:13px;margin-bottom:8px;color:var(--muted);
      font-weight:600;transition:color 0.3s ease;
    }
    
    .field input,.field select, .field textarea{
      width:100%;padding:12px 16px;border-radius:12px;
      border:2px solid rgba(255,111,181,0.2);background:#fff;
      transition:all 0.3s ease;font-size:14px;
      box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .field input:focus,.field select:focus, .field textarea:focus{
      outline:none;border-color:var(--pink);transform:translateY(-2px);
      box-shadow: 0 8px 25px rgba(255,111,181,0.2);
    }

    .field input:hover, .field select:hover, .field textarea:hover {
      border-color:var(--violet);transform:translateY(-1px);
    }

    /* sections */
    section{
      padding:40px 0;border-top:1px solid rgba(138,92,246,0.04);
      animation: sectionFade 0.6s ease-out;
    }

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

    .cards{
      grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;
      animation: cardsFloat 0.8s ease-out;
    }

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

    .card{
      background:var(--card);padding:20px;border-radius:16px;
      backdrop-filter:blur(10px);box-shadow:0 10px 40px rgba(138,92,246,0.1);
      transition:all 0.4s ease;position:relative;overflow:hidden;
      border:1px solid rgba(255,111,181,0.1);
    }

    .card::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,111,181,0.1), transparent);
      transition: left 0.6s ease;
    }

    .card:hover::before { left: 100%; }
    .card:hover{
      transform:translateY(-8px) scale(1.02);
      box-shadow: 0 20px 60px rgba(138,92,246,0.2);
      border-color:var(--pink);
    }

    .card:nth-child(1) { animation-delay: 0.1s; }
    .card:nth-child(2) { animation-delay: 0.2s; }
    .card:nth-child(3) { animation-delay: 0.3s; }

    .card h4{
      margin:0 0 10px;background:var(--gradient2);-webkit-background-clip: text;
      -webkit-text-fill-color: transparent;background-clip: text;
      font-size:18px;font-weight:700;
    }
    .card p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}

    .process{
      display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px;
      animation: processSlide 1s ease-out;
    }

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

    .step{
      background:linear-gradient(135deg,#fff,#f8f9ff);padding:20px;border-radius:16px;
      text-align:center;box-shadow:0 10px 30px rgba(138,92,246,0.1);
      transition:all 0.4s ease;position:relative;overflow:hidden;
      border:2px solid rgba(255,111,181,0.1);
    }

    .step::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--gradient3);
      opacity: 0;
      transition: opacity 0.3s ease;
      z-index: -1;
    }

    .step:hover::before { opacity: 0.1; }
    .step:hover{
      transform:translateY(-8px) scale(1.05);
      box-shadow: 0 20px 50px rgba(138,92,246,0.2);
      border-color:var(--pink);
    }

    .step:nth-child(1) { animation-delay: 0.1s; }
    .step:nth-child(2) { animation-delay: 0.2s; }
    .step:nth-child(3) { animation-delay: 0.3s; }
    .step:nth-child(4) { animation-delay: 0.4s; }

    .step h5{
      margin:12px 0 8px;background:var(--gradient1);-webkit-background-clip: text;
      -webkit-text-fill-color: transparent;background-clip: text;
      font-size:16px;font-weight:700;
    }

    .step div {
      width: 40px; height: 40px; border-radius: 50%;
      background: var(--gradient2); color: white;
      display: flex; align-items: center; justify-content: center;
      font-weight: 800; font-size: 18px; margin: 0 auto 10px;
      animation: stepPulse 2s ease-in-out infinite;
    }

    @keyframes stepPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }

    .two-col{display:grid;grid-template-columns:1fr 1fr;gap:20px;animation: twoColSlide 0.8s ease-out}

    @keyframes twoColSlide {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .testimonials{
      display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;
      animation: testimonialsFloat 1s ease-out;
    }

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

    .testimonial{
      background:linear-gradient(135deg,#fff,#fff0fb);padding:20px;border-radius:16px;
      border:2px solid rgba(255,111,181,0.1);transition:all 0.4s ease;
      position:relative;overflow:hidden;box-shadow: 0 8px 25px rgba(138,92,246,0.1);
    }

    .testimonial::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,111,181,0.1), transparent);
      transition: left 0.6s ease;
    }

    .testimonial:hover::before { left: 100%; }
    .testimonial:hover{
      transform:translateY(-6px) scale(1.02);
      box-shadow: 0 15px 40px rgba(138,92,246,0.2);
      border-color:var(--pink);
    }

    .testimonial:nth-child(1) { animation-delay: 0.1s; }
    .testimonial:nth-child(2) { animation-delay: 0.2s; }
    .testimonial:nth-child(3) { animation-delay: 0.3s; }

    .faq-item{
      margin-bottom:15px;border:2px solid rgba(255,111,181,0.1);
      border-radius:12px;overflow:hidden;transition:all 0.3s ease;
      animation: faqSlide 0.6s ease-out;
    }

    @keyframes faqSlide {
      from { opacity: 0; transform: translateX(-20px); }
      to { opacity: 1; transform: translateX(0); }
    }

    .faq-item:hover { border-color: var(--pink); }

    .faq-question{
      background:linear-gradient(135deg,#fff,#f8f9ff);padding:16px;cursor:pointer;
      font-weight:600;transition:all 0.3s ease;position:relative;
      border-bottom: 1px solid rgba(255,111,181,0.1);
    }

    .faq-question:hover{
      background:var(--gradient1);color:white;transform:translateY(-2px);
      box-shadow: 0 5px 15px rgba(255,111,181,0.3);
    }

    .faq-answer{
      background:linear-gradient(135deg,#f8f9ff,#fff);padding:16px;
      display:none;color:var(--muted);line-height:1.6;
      animation: faqAnswerSlide 0.3s ease-out;
    }

    @keyframes faqAnswerSlide {
      from { opacity: 0; transform: translateY(-10px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .alert{
      padding:15px;border-radius:12px;margin-bottom:20px;font-weight:600;
      animation: alertSlide 0.5s ease-out;
    }

    @keyframes alertSlide {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    .alert-success{
      background:linear-gradient(135deg,#d4edda,#c3e6cb);color:#155724;
      border:2px solid #c3e6cb;box-shadow: 0 4px 15px rgba(21,87,36,0.1);
    }

    .alert-error{
      background:linear-gradient(135deg,#f8d7da,#f5c6cb);color:#721c24;
      border:2px solid #f5c6cb;box-shadow: 0 4px 15px rgba(114,28,36,0.1);
    }

    footer{
      padding:40px 0;color:var(--muted);background:linear-gradient(135deg,#f8f9ff,#fff);
      border-top: 1px solid rgba(255,111,181,0.1);
      animation: footerFade 1s ease-out;
    }

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

    /* Floating particles animation */
    .floating-particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }

    .particle {
      position: absolute;
      width: 4px;
      height: 4px;
      background: var(--gradient1);
      border-radius: 50%;
      animation: float 6s ease-in-out infinite;
    }

    @keyframes float {
      0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.3; }
      50% { transform: translateY(-20px) rotate(180deg); opacity: 0.8; }
    }

    /* Media Gallery Animations */
    .media-item {
      animation: mediaSlide 0.8s ease-out;
    }

    @keyframes mediaSlide {
      from { opacity: 0; transform: translateY(30px) scale(0.95); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    .media-item:hover {
      transform: translateY(-8px) scale(1.02);
      box-shadow: 0 20px 60px rgba(138,92,246,0.2);
    }

    .media-item:nth-child(1) { animation-delay: 0.1s; }
    .media-item:nth-child(2) { animation-delay: 0.2s; }
    .media-item:nth-child(3) { animation-delay: 0.3s; }
    .media-item:nth-child(4) { animation-delay: 0.4s; }
    .media-item:nth-child(5) { animation-delay: 0.5s; }
    .media-item:nth-child(6) { animation-delay: 0.6s; }

    @media(max-width:980px){
      .hero{grid-template-columns:1fr 320px}
      .cards{grid-template-columns:repeat(2,1fr)}
      .process{grid-template-columns:repeat(2,1fr)}
      .testimonials{grid-template-columns:1fr}
      .media-grid{grid-template-columns:repeat(2,1fr)}
    }
    @media(max-width:720px){
      .hero{grid-template-columns:1fr}
      .enquiry{order:2}
      .cards{grid-template-columns:1fr}
      .two-col{grid-template-columns:1fr}
      .media-grid{grid-template-columns:1fr}
    }