<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Under Construction</title>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap');

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

        :root {
            --bg: #0d0d0f;
            --surface: #141418;
            --border: rgba(255, 255, 255, 0.06);
            --text: #e8e8ec;
            --muted: #5a5a6e;
            --accent: #7c6af7;
            --accent-glow: rgba(124, 106, 247, 0.18);
        }

        html,
        body {
            height: 100%;
            background: var(--bg);
            color: var(--text);
            font-family: 'Inter', system-ui, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        /* ── Subtle grid background ── */
        body::before {
            content: '';
            position: fixed;
            inset: 0;
            background-image:
                linear-gradient(var(--border) 1px, transparent 1px),
                linear-gradient(90deg, var(--border) 1px, transparent 1px);
            background-size: 48px 48px;
            pointer-events: none;
        }

        .container {
            position: relative;
            text-align: center;
            padding: 0 24px;
            z-index: 1;
        }

        /* ── Cog cluster ── */
        .cogs {
            position: relative;
            width: 140px;
            height: 140px;
            margin: 0 auto 40px;
        }

        .cog-wrap {
            position: absolute;
        }

        /* Large cog — centre */
        .cog-wrap.large {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        /* Small cog — top-right meshing */
        .cog-wrap.small {
            top: 4px;
            right: 4px;
        }

        /* Tiny cog — bottom-left meshing */
        .cog-wrap.tiny {
            bottom: 8px;
            left: 8px;
        }

        svg.cog {
            display: block;
            overflow: visible;
        }

        /* Rotations */
        @keyframes spin-cw {
            to {
                transform: rotate(360deg);
            }
        }

        @keyframes spin-ccw {
            to {
                transform: rotate(-360deg);
            }
        }

        .spin-cw {
            animation: spin-cw 8s linear infinite;
            transform-origin: center;
        }

        .spin-ccw {
            animation: spin-ccw 5s linear infinite;
            transform-origin: center;
        }

        .spin-cw2 {
            animation: spin-cw 4s linear infinite;
            transform-origin: center;
        }

        /* ── Glow ring behind cogs ── */
        .glow-ring {
            position: absolute;
            inset: -20px;
            border-radius: 50%;
            background: radial-gradient(circle, var(--accent-glow) 0%, transparent 70%);
            pointer-events: none;
        }

        /* ── Text ── */
        .label {
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 14px;
        }

        h1 {
            font-size: clamp(1.6rem, 5vw, 2.6rem);
            font-weight: 600;
            letter-spacing: -0.02em;
            line-height: 1.2;
            margin-bottom: 16px;
        }

        p {
            font-size: 0.95rem;
            color: var(--muted);
            line-height: 1.7;
            max-width: 320px;
            margin: 0 auto 36px;
        }

        /* ── Divider ── */
        .divider {
            width: 40px;
            height: 2px;
            background: var(--accent);
            border-radius: 2px;
            margin: 0 auto;
            opacity: 0.5;
        }

        /* ── Fade-in on load ── */
        .container {
            animation: fadeIn 0.9s ease both;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(16px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>
    <div class="container">
        <!-- Cog cluster -->
        <div class="cogs">
            <div class="glow-ring"></div>

            <!-- Large cog -->
            <div class="cog-wrap large">
                <svg class="cog spin-cw" width="82" height="82" viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <filter id="g1" x="-30%" y="-30%" width="160%" height="160%">
                            <feGaussianBlur in="SourceGraphic" stdDeviation="2.5" result="blur" />
                            <feMerge>
                                <feMergeNode in="blur" />
                                <feMergeNode in="SourceGraphic" />
                            </feMerge>
                        </filter>
                    </defs>
                    <g filter="url(#g1)">
                        <!-- Teeth (12 teeth) -->
                        <rect x="36" y="2" width="10" height="14" rx="3" fill="#7c6af7" />
                        <rect x="36" y="66" width="10" height="14" rx="3" fill="#7c6af7" />
                        <rect x="2" y="36" width="14" height="10" rx="3" fill="#7c6af7" />
                        <rect x="66" y="36" width="14" height="10" rx="3" fill="#7c6af7" />

                        <rect x="56.4" y="7.1" width="10" height="14" rx="3" fill="#7c6af7" transform="rotate(45 61.4 14.1)" />
                        <rect x="15.6" y="60.9" width="10" height="14" rx="3" fill="#7c6af7" transform="rotate(45 20.6 67.9)" />
                        <rect x="60.9" y="56.4" width="14" height="10" rx="3" fill="#7c6af7" transform="rotate(45 67.9 61.4)" />
                        <rect x="7.1" y="15.6" width="14" height="10" rx="3" fill="#7c6af7" transform="rotate(45 14.1 20.6)" />

                        <!-- Hub ring -->
                        <circle cx="41" cy="41" r="26" fill="#141418" stroke="#7c6af7" stroke-width="2.5" />
                        <!-- Inner hole -->
                        <circle cx="41" cy="41" r="10" fill="#0d0d0f" />
                    </g>
                </svg>
            </div>

            <!-- Small cog -->
            <div class="cog-wrap small">
                <svg class="cog spin-ccw" width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="18" y="1" width="8" height="10" rx="2" fill="#a89cf7" />
                    <rect x="18" y="33" width="8" height="10" rx="2" fill="#a89cf7" />
                    <rect x="1" y="18" width="10" height="8" rx="2" fill="#a89cf7" />
                    <rect x="33" y="18" width="10" height="8" rx="2" fill="#a89cf7" />
                    <rect x="30.5" y="4" width="8" height="10" rx="2" fill="#a89cf7" transform="rotate(45 34.5 9)" />
                    <rect x="5.5" y="30" width="8" height="10" rx="2" fill="#a89cf7" transform="rotate(45 9.5 35)" />
                    <rect x="30.5" y="24" width="10" height="8" rx="2" fill="#a89cf7" transform="rotate(45 35.5 28)" />
                    <rect x="3.5" y="12" width="10" height="8" rx="2" fill="#a89cf7" transform="rotate(45 8.5 16)" />
                    <circle cx="22" cy="22" r="13" fill="#141418" stroke="#a89cf7" stroke-width="2" />
                    <circle cx="22" cy="22" r="5" fill="#0d0d0f" />
                </svg>
            </div>

            <!-- Tiny cog -->
            <div class="cog-wrap tiny">
                <svg class="cog spin-cw2" width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="13" y="1" width="6" height="8" rx="2" fill="#c4bafb" />
                    <rect x="13" y="23" width="6" height="8" rx="2" fill="#c4bafb" />
                    <rect x="1" y="13" width="8" height="6" rx="2" fill="#c4bafb" />
                    <rect x="23" y="13" width="8" height="6" rx="2" fill="#c4bafb" />
                    <rect x="21.5" y="2.5" width="6" height="8" rx="2" fill="#c4bafb" transform="rotate(45 24.5 6.5)" />
                    <rect x="4.5" y="21.5" width="6" height="8" rx="2" fill="#c4bafb" transform="rotate(45 7.5 25.5)" />
                    <rect x="21.5" y="21.5" width="8" height="6" rx="2" fill="#c4bafb" transform="rotate(45 25.5 24.5)" />
                    <rect x="2.5" y="10.5" width="8" height="6" rx="2" fill="#c4bafb" transform="rotate(45 6.5 13.5)" />
                    <circle cx="16" cy="16" r="9" fill="#141418" stroke="#c4bafb" stroke-width="2" />
                    <circle cx="16" cy="16" r="3.5" fill="#0d0d0f" />
                </svg>
            </div>
        </div>

        <!-- Text -->
        <p class="label">Coming Soon</p>
        <h1>Under Construction</h1>
        <p>We're putting the finishing touches on something great. Check back soon.</p>
        <div class="divider"></div>
    </div>
</body>

</html><?php /**PATH C:\xampp\htdocs\petrol-login\resources\views/welcome.blade.php ENDPATH**/ ?>