<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
  <title>cravo · fully responsive profit intelligence</title>
  
  <!-- Tailwind + fonts + GSAP + THREE -->
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700;800;900&display=swap" rel="stylesheet">
  
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    
    body {
      font-family: 'Inter Tight', sans-serif;
      background: #020617;
      color: #fff;
      min-height: 100vh;
      width: 100%;
      overflow-x: hidden;
      overflow-y: auto;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      position: relative;
    }

    /* ---- KINETIC CANVAS (fullscreen) ---- */
    #kinetic-canvas {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 0;
      pointer-events: none;
    }

    /* ---- MAIN CONTENT (fully responsive padding) ---- */
    .content {
      position: relative;
      z-index: 20;
      width: 100%;
      max-width: 1600px;
      padding: 0.75rem;
      margin: 0.5rem auto;
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    @media (min-width: 480px) { .content { padding: 1rem; } }
    @media (min-width: 1024px) { .content { padding: 1.5rem; } }

    /* ---- QUANTUM CARD (fluid inner spacing) ---- */
    .quantum-card {
      background: rgba(3, 10, 28, 0.25);
      backdrop-filter: blur(60px) saturate(300%);
      -webkit-backdrop-filter: blur(60px) saturate(300%);
      border: 1px solid rgba(70, 150, 255, 0.3);
      border-radius: 2rem;
      box-shadow: 0 60px 120px -30px #000, 0 0 0 1px rgba(255,255,255,0.03) inset, 0 0 100px rgba(0,100,255,0.3);
      width: 100%;
      padding: 1.5rem 1.2rem;
    }
    @media (min-width: 640px) { .quantum-card { padding: 2rem 1.8rem; border-radius: 2.5rem; } }
    @media (min-width: 1024px) { .quantum-card { padding: 2.5rem; border-radius: 3rem; } }
    @media (min-width: 1280px) { .quantum-card { padding: 3rem; } }

    /* ---- INPUT (fully contained) ---- */
    .orbit-input {
      background: rgba(10, 20, 40, 0.5);
      border: 2px solid rgba(0, 180, 255, 0.4);
      border-radius: 3rem;
      transition: all 0.3s;
      box-shadow: 0 0 40px rgba(0,140,255,0.3), inset 0 0 20px rgba(0,140,255,0.2);
      display: flex;
      align-items: center;
      width: 100%;
    }
    .orbit-input:focus-within {
      border-color: #3b82f6;
      box-shadow: 0 0 70px #3b82f6;
    }

    #revenue {
      width: 100%;
      background: transparent;
      border: 0;
      font-weight: 900;
      color: white;
      outline: none;
      font-size: clamp(1.8rem, 6vw, 4.5rem);
      line-height: 1.2;
      padding: 0.75rem 0.5rem;
    }

    /* ---- CARDS (responsive padding) ---- */
    .kinetic-card {
      background: rgba(8, 18, 38, 0.6);
      backdrop-filter: blur(30px);
      border: 1px solid rgba(255,255,255,0.05);
      border-radius: 1.8rem;
      transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.2), border-color 0.3s, box-shadow 0.5s;
      box-shadow: 0 30px 50px -30px #000;
      position: relative;
      overflow: hidden;
      padding: 1.2rem 1.5rem;
    }
    @media (min-width: 768px) { .kinetic-card { padding: 1.5rem 2rem; border-radius: 2rem; } }
    .kinetic-card::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(800px circle at var(--x, 50%) var(--y, 50%), rgba(59,130,246,0.25), transparent 50%);
      opacity: 0;
      transition: opacity 0.4s;
      pointer-events: none;
    }
    .kinetic-card:hover::before { opacity: 1; }
    .kinetic-card:hover {
      transform: scale(1.02) translateY(-4px);
      border-color: rgba(59,130,246,0.6);
      box-shadow: 0 50px 80px -15px #1e3a8a;
    }

    /* ---- SUPERNOVA SAVINGS (no overflow) ---- */
    .supernova-card {
      background: linear-gradient(145deg, #2563eb, #1e40af, #3730a3);
      background-size: 300% 300%;
      border-radius: 2rem;
      box-shadow: 0 40px 70px -15px #1e3a8a, 0 0 100px #2563eb, inset 0 2px 5px rgba(255,255,255,0.5);
      transition: all 0.5s;
      position: relative;
      overflow: hidden;
      animation: gradientFlow 8s ease infinite;
      padding: 1.5rem 1.5rem;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    @media (min-width: 768px) { .supernova-card { padding: 2rem; border-radius: 2.5rem; } }
    @keyframes gradientFlow {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }
    .supernova-card:hover {
      transform: scale(1.02) translateY(-4px);
      box-shadow: 0 70px 120px -10px #1e3a8a, 0 0 150px #3b82f6;
    }

    /* value displays – fluid */
    .value-display { font-size: clamp(1.8rem, 5vw, 3.8rem); font-weight: 900; line-height: 1.1; }
    .savings-value { font-size: clamp(2.5rem, 8vw, 5.5rem); font-weight: 900; line-height: 1; }

    /* grid gap responsive */
    .grid-custom { gap: 1rem; }
    @media (min-width: 768px) { .grid-custom { gap: 1.2rem; } }

    /* mobile first adjustments */
    .mobile-stack {
      display: flex;
      flex-direction: column;
    }

    /* remove spinners */
    input[type=text]::-webkit-outer-spin-button,
    input[type=text]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

    /* floating micro animation */
    .float-micro {
      animation: floatMicro 3s infinite alternate ease-in-out;
    }
    @keyframes floatMicro {
      0% { transform: translateY(0px); }
      100% { transform: translateY(-6px); }
    }

    /* ensure footer doesn't overflow */
    .footer-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1rem;
      justify-content: center;
    }
    @media (min-width: 1024px) { .footer-tags { justify-content: flex-start; } }
  </style>
</head>
<body>

  <canvas id="kinetic-canvas"></canvas>

  <div class="content">
    <!-- MAIN CARD – now with 100% responsive inner layout -->
    <div class="quantum-card relative overflow-visible">

      <!-- energetic background orbs (hidden on very small for performance, but fine) -->
      <div class="absolute top-0 left-0 w-full h-full overflow-hidden pointer-events-none">
        <div class="absolute top-[0%] left-[0%] w-48 md:w-64 h-48 md:h-64 bg-blue-600/20 rounded-full blur-[80px] md:blur-[120px] animate-pulse"></div>
        <div class="absolute bottom-[0%] right-[0%] w-56 md:w-80 h-56 md:h-80 bg-indigo-600/20 rounded-full blur-[100px] md:blur-[140px] animate-pulse" style="animation-delay: 1.5s;"></div>
      </div>

      <!-- RESPONSIVE GRID – stack on mobile, two columns on large -->
      <div class="grid lg:grid-cols-2 grid-custom items-stretch relative z-30">

        <!-- LEFT COLUMN (full width on mobile) -->
        <div class="flex flex-col justify-between space-y-5 md:space-y-6 xl:space-y-8">
          
          <!-- badge (always visible) -->
          <div class="flex items-center gap-2 md:gap-3 text-blue-300 text-[0.6rem] md:text-xs lg:text-sm font-black tracking-[0.3em] md:tracking-[0.4em]">
            <span class="relative flex h-2 w-2 md:h-3 md:w-3">
              <span class="animate-ping absolute inline-flex h-full w-full rounded-full bg-blue-400 opacity-75"></span>
              <span class="relative inline-flex rounded-full h-2 w-2 md:h-3 md:w-3 bg-blue-500"></span>
            </span>
            <span>PROFIT·INTELLIGENCE</span>
          </div>

          <!-- headline (scales perfectly) -->
          <h1 class="text-4xl sm:text-5xl md:text-6xl xl:text-7xl 2xl:text-8xl font-black leading-[0.95] tracking-tight">
            <span class="block text-white">Scale without</span>
            <span class="block text-transparent bg-clip-text bg-gradient-to-r from-slate-300 to-slate-100 relative">
              the commission.
              <span class="absolute -bottom-2 left-0 w-20 md:w-32 h-1.5 md:h-2 bg-blue-500 rounded-full blur-sm"></span>
            </span>
          </h1>

          <!-- input group (safe) -->
          <div class="space-y-2 md:space-y-3">
            <label class="text-xs md:text-sm font-bold text-blue-200 tracking-widest flex items-center gap-2">
              <span class="text-lg md:text-xl animate-pulse">⟁</span> MONTHLY REVENUE <span class="text-[0.6rem] md:text-xs text-blue-400">GBP</span>
            </label>
            <div class="orbit-input pl-4 md:pl-6">
              <span class="text-3xl md:text-4xl xl:text-5xl font-black text-blue-400 mr-1 drop-shadow-2xl">£</span>
              <input type="text" id="revenue" value="10,000" 
                class="flex-1 bg-transparent font-black text-white placeholder:text-slate-700 text-2xl sm:text-3xl md:text-4xl lg:text-5xl"
                placeholder="0">
            </div>
            <div class="flex flex-wrap gap-3 ml-2 text-[0.6rem] md:text-xs font-bold">
              <span class="text-blue-400 flex items-center gap-1"><span class="text-white">↳</span> 30% external</span>
              <span class="text-slate-500">vs</span>
              <span class="text-blue-300 flex items-center gap-1"><span class="text-white">⟐</span> £60 flat</span>
            </div>
          </div>

          <!-- CTA desktop (hidden on mobile) -->
          <div class="hidden lg:block pt-2">
            <a href="#" id="cta-button"
              class="group inline-flex px-6 xl:px-8 py-4 xl:py-5 bg-gradient-to-r from-blue-600 to-indigo-600 rounded-2xl font-black text-base xl:text-lg tracking-wide transition-all shadow-2xl shadow-blue-800/50 border border-white/20 items-center gap-2 xl:gap-3 overflow-hidden">
              <span class="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-1000"></span>
              <span class="relative z-10 flex items-center gap-2">
                <span class="text-xl xl:text-2xl">⚡</span> ACTIVATE CRAVO
                <svg class="w-4 h-4 xl:w-5 xl:h-5 group-hover:translate-x-2 transition-transform" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path d="M13 7l5 5m0 0l-5 5m5-5H6"/></svg>
              </span>
            </a>
            <div class="flex gap-4 mt-3 text-[0.6rem] xl:text-xs text-slate-400 font-bold">
              <span class="flex items-center gap-1"><span class="text-blue-300 text-base">✓</span> zero lock‑ins</span>
              <span class="flex items-center gap-1"><span class="text-blue-300 text-base">✓</span> instant payout</span>
            </div>
          </div>
        </div>

        <!-- RIGHT COLUMN – CARDS (stack on mobile, but we use row layout on mobile inside) -->
        <div class="grid grid-cols-1 sm:grid-rows-[auto_auto_auto] gap-4 h-full">
          <!-- commission card -->
          <div class="kinetic-card flex justify-between items-center" onmousemove="updateCardGlow(event, 'card1')" id="card1">
            <div>
              <p class="text-indigo-300 text-[0.55rem] md:text-[0.65rem] font-black tracking-[0.2em] uppercase">third‑party · 30%</p>
              <h3 class="text-base md:text-xl font-bold mt-0.5 flex items-center gap-2">
                Platform fees
                <!-- <span class="bg-red-500/30 text-red-300 text-[0.5rem] md:text-[0.55rem] px-1.5 py-0.5 rounded-full border border-red-400/40">variable</span> -->
              </h3>
            </div>
            <div class="text-right">
              <p id="commission-output" class="value-display text-red-400 drop-shadow-[0_0_15px_rgba(255,50,50,0.7)]">£0</p>
              <p class="text-[0.5rem] md:text-[0.55rem] font-bold text-slate-500 tracking-widest">per month</p>
            </div>
          </div>

          <!-- cravo flat card -->
          <div class="kinetic-card flex justify-between items-center" onmousemove="updateCardGlow(event, 'card2')" id="card2">
            <div>
              <p class="text-blue-300 text-[0.55rem] md:text-[0.65rem] font-black tracking-[0.2em] uppercase">cravo membership</p>
              <h3 class="text-base md:text-xl font-bold mt-0.5">Flat monthly fee</h3>
            </div>
            <div class="text-right">
              <p class="value-display text-blue-400 drop-shadow-[0_0_20px_rgba(0,200,255,0.9)]">£60</p>
              <p class="text-[0.5rem] md:text-[0.55rem] font-bold text-slate-500 tracking-widest">fixed cost</p>
            </div>
          </div>

          <!-- SAVINGS CARD – now with absolute relative sizing, no overflow -->
          <div class="supernova-card relative" id="savingsCard">
            <div class="relative z-30">
              <div class="flex items-center gap-2 text-blue-100 font-black text-[0.6rem] md:text-xs tracking-[0.2em] md:tracking-[0.25em] mb-1 md:mb-2">
                <span class="w-1.5 h-1.5 md:w-2 md:h-2 bg-white rounded-full animate-ping opacity-75"></span>
                <span class="float-micro inline-block">SAVINGS·KINETIC</span>
              </div>
              <p id="savings-output" class="savings-value text-white mb-1 drop-shadow-2xl">£0</p>
              <div class="flex items-center gap-2 text-base md:text-lg font-bold">
                <span class="text-blue-200">⟐ you keep 100%</span>
                <span class="text-2xl md:text-3xl animate-bounce">🚀</span>
              </div>
            </div>
            <!-- floating coin – now positioned not to overflow card -->
            <div class="absolute -right-3 md:-right-4 -bottom-3 md:-bottom-4 w-16 md:w-24 h-16 md:h-24 opacity-30 rotate-12 group-hover:rotate-45 transition-all duration-1000">
              <svg viewBox="0 0 24 24" fill="white" width="100%" height="100%"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.82v-1.91c-1.84-.42-3.32-1.63-3.48-3.53h2.12c.13 1.05.9 1.74 2.14 1.74 1.32 0 2.11-.64 2.11-1.54 0-.87-.61-1.42-2.14-1.99-2.09-.76-3.79-1.57-3.79-3.72 0-1.81 1.34-3.1 3.22-3.51V4h2.82v1.91c1.55.33 2.92 1.39 3.19 3.1h-2.12c-.22-.92-.88-1.51-1.95-1.51-1.15 0-1.87.59-1.87 1.43 0 .79.62 1.3 2.11 1.83 2.29.83 3.82 1.78 3.82 3.9 0 1.95-1.4 3.19-3.39 3.53z"/></svg>
            </div>
          </div>
        </div>

        <!-- MOBILE CTA (visible only on small screens) -->
        <div class="lg:hidden flex flex-col gap-3 pt-5 col-span-1 lg:col-span-2">
          <a href="#" class="w-full bg-gradient-to-r from-blue-600 to-indigo-600 text-white py-5 rounded-2xl font-black text-base sm:text-lg text-center shadow-2xl shadow-blue-800/40 border border-white/10 flex items-center justify-center gap-2 active:scale-95 transition-all">
            <span class="text-xl sm:text-2xl">⚡</span> ACTIVATE CRAVO
          </a>
          <p class="text-slate-400 text-xs font-bold text-center">zero lock‑ins · instant payout</p>
        </div>
      </div>

      <!-- FOOTER TAGS (fully responsive, no overflow) -->
      <div class="footer-tags mt-6 md:mt-8 pt-4 md:pt-5 border-t border-white/5 text-[0.55rem] md:text-[0.65rem] text-slate-500 font-black">
        <span class="flex items-center gap-1 hover:text-blue-300 transition"><span class="text-blue-400 text-xs md:text-sm">⏣</span> bank‑grade</span>
        <span class="flex items-center gap-1 hover:text-blue-300 transition"><span class="text-blue-400 text-xs md:text-sm">⌘</span> instant savings</span>
        <span class="flex items-center gap-1 hover:text-blue-300 transition"><span class="text-blue-400 text-xs md:text-sm">⟐</span> 15k+ merchants</span>
        <span class="flex items-center gap-1 hover:text-blue-300 transition"><span class="text-blue-400 text-xs md:text-sm">⚡</span> realtime AI</span>
      </div>
    </div>
  </div>

  <script>
    (function() {
      // ---- THREE.JS KINETIC BACKGROUND (simplified for performance on all devices) ----
      const canvas = document.getElementById('kinetic-canvas');
      const renderer = new THREE.WebGLRenderer({ canvas, alpha: true, antialias: true });
      renderer.setSize(window.innerWidth, window.innerHeight);
      renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
      renderer.setClearColor(0x020617, 1);

      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(0, 0, 20);

      const ambient = new THREE.AmbientLight(0x404060);
      scene.add(ambient);
      const light1 = new THREE.PointLight(0x2563eb, 2, 30);
      light1.position.set(5, 5, 5);
      scene.add(light1);
      const light2 = new THREE.PointLight(0x3b82f6, 2, 30);
      light2.position.set(-5, -3, 5);
      scene.add(light2);

      // main blob
      const geoBlob = new THREE.IcosahedronGeometry(2.5, 3);
      const matBlob = new THREE.MeshStandardMaterial({ color: 0x2563eb, emissive: 0x112244, roughness: 0.2, metalness: 0.7 });
      const blob = new THREE.Mesh(geoBlob, matBlob);
      scene.add(blob);

      // orbiting spheres
      const orbGeo = new THREE.SphereGeometry(0.6, 16);
      const orbMat = new THREE.MeshStandardMaterial({ color: 0x3b82f6, emissive: 0x1a2c4a });
      const orb1 = new THREE.Mesh(orbGeo, orbMat); orb1.position.set(4, 3, 2); scene.add(orb1);
      const orb2 = new THREE.Mesh(orbGeo, orbMat); orb2.position.set(-4, -2, 3); scene.add(orb2);
      const orb3 = new THREE.Mesh(orbGeo, orbMat); orb3.position.set(3, -3, -2); scene.add(orb3);

      // particles
      const particleCount = 1500;
      const positions = new Float32Array(particleCount * 3);
      for (let i = 0; i < particleCount * 3; i += 3) {
        positions[i] = (Math.random() - 0.5) * 50;
        positions[i+1] = (Math.random() - 0.5) * 50;
        positions[i+2] = (Math.random() - 0.5) * 30;
      }
      const particleGeo = new THREE.BufferGeometry();
      particleGeo.setAttribute('position', new THREE.BufferAttribute(positions, 3));
      const particleMat = new THREE.PointsMaterial({ color: 0x88aaff, size: 0.05, transparent: true, blending: THREE.AdditiveBlending });
      const particles = new THREE.Points(particleGeo, particleMat);
      scene.add(particles);

      function animate() {
        requestAnimationFrame(animate);
        const time = performance.now() * 0.001;

        // blob morph
        const posAttr = blob.geometry.attributes.position;
        const array = posAttr.array;
        for (let i = 0; i < array.length; i += 3) {
          let x = array[i], y = array[i+1], z = array[i+2];
          let len = Math.sqrt(x*x + y*y + z*z);
          let nx = x/len, ny = y/len, nz = z/len;
          let noise = Math.sin(time*2.5 + x*3) * 0.5 + Math.cos(time*1.8 + y*3) * 0.4;
          array[i] = nx * (2.5 + noise*0.7);
          array[i+1] = ny * (2.5 + noise*0.6);
          array[i+2] = nz * (2.5 + noise*0.6);
        }
        blob.geometry.attributes.position.needsUpdate = true;
        blob.geometry.computeVertexNormals();
        blob.rotation.x += 0.002;
        blob.rotation.y += 0.003;
        
        orb1.position.x = 4.5 + Math.sin(time*0.9)*2.5;
        orb1.position.y = 3 + Math.cos(time*0.7)*2;
        orb2.position.x = -4.5 + Math.sin(time*0.5)*3;
        orb2.position.y = -2 + Math.cos(time*0.6)*2.5;
        orb3.position.x = 3 + Math.sin(time*1.1)*3;
        orb3.position.y = -3 + Math.cos(time*0.8)*2.5;

        particles.rotation.y += 0.0002;
        renderer.render(scene, camera);
      }
      animate();

      window.addEventListener('resize', () => {
        camera.aspect = window.innerWidth / window.innerHeight;
        camera.updateProjectionMatrix();
        renderer.setSize(window.innerWidth, window.innerHeight);
      });

      // ---- CARD GLOW ----
      window.updateCardGlow = function(event, id) {
        const card = document.getElementById(id);
        if (!card) return;
        const rect = card.getBoundingClientRect();
        const x = ((event.clientX - rect.left) / rect.width) * 100;
        const y = ((event.clientY - rect.top) / rect.height) * 100;
        card.style.setProperty('--x', x + '%');
        card.style.setProperty('--y', y + '%');
      };

      // ---- REVENUE LOGIC ----
      const revenueInput = document.getElementById('revenue');
      const commissionOut = document.getElementById('commission-output');
      const savingsOut = document.getElementById('savings-output');
      let displayData = { commission: 0, savings: 0 };
      const formatter = new Intl.NumberFormat('en-GB', { style: 'currency', currency: 'GBP', minimumFractionDigits: 0, maximumFractionDigits: 0 });

      function updateNumbers() {
        let raw = revenueInput.value.replace(/[^0-9]/g, '');
        let revenue = parseFloat(raw) || 0;
        let monthlyCommission = revenue * 0.30;
        let monthlySavings = Math.max(0, monthlyCommission - 60);

        gsap.to(displayData, {
          commission: monthlyCommission,
          savings: monthlySavings,
          duration: 1.2,
          ease: "expo.out",
          onUpdate: () => {
            commissionOut.innerText = formatter.format(displayData.commission);
            savingsOut.innerText = formatter.format(displayData.savings);
          }
        });
        if (raw) {
          revenueInput.value = parseInt(raw).toLocaleString('en-GB');
        }
      }
      revenueInput.addEventListener('input', updateNumbers);
      window.onload = () => {
        revenueInput.value = "10,000";
        updateNumbers();
      };

      // ---- GSAP ENTRANCE (works on all screens) ----
      gsap.fromTo('.quantum-card', 
        { scale: 0.95, opacity: 0, y: 20 },
        { scale: 1, opacity: 1, y: 0, duration: 1.4, ease: 'power3.out' }
      );
      gsap.fromTo('h1 span', 
        { y: 40, opacity: 0 },
        { y: 0, opacity: 1, stagger: 0.15, duration: 1.2, ease: 'back.out(1.2)', delay: 0.3 }
      );
      gsap.fromTo('.kinetic-card, #savingsCard', 
        { x: 20, opacity: 0 },
        { x: 0, opacity: 1, stagger: 0.1, duration: 1, ease: 'power3.out', delay: 0.6 }
      );
    })();
  </script>
</body>
</html><?php /**PATH D:\skietagency\wedding\cravo-calculator\resources\views/calculator.blade.php ENDPATH**/ ?>