<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
{{-- Belt and braces with the X-Robots-Tag header: some crawlers read only one. --}}
<meta name="robots" content="noindex, nofollow, noarchive">
<title>CluPilot Cloud</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg">

{{--
    Self-contained on purpose: this is shown while the application is mid-deploy
    or freshly installed, which is exactly when the Vite manifest may not exist.
    Pulling it in through @vite would throw an exception instead of rendering
    the reassurance the visitor came for. Every value below is a copy of a token
    from resources/css/portal-tokens.css, which is the price of that.

    The fonts are the site's own static files. If they are missing the page
    degrades to a system sans and still reads correctly.
--}}
@verbatim
<style>
  @font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
  @font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}
  @font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
  @font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
  @font-face{font-family:"Plex Mono";src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}

  :root{
    --bg:#f6f6f8; --surface:#fff; --surface-2:#fafafb;
    --ink:#17171c; --body:#43434e; --muted:#6e6e7a;
    --line:#e9e9ee; --line-2:#dcdce4;
    --accent:#f97316; --accent-ink:#b8500a; --accent-press:#974208;
    --accent-wash:#fff3e9; --accent-line:#e8cdb2;
    --success:#30b15c;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    font-family:"Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
    background:var(--bg);color:var(--body);line-height:1.55;
    min-height:100dvh;display:grid;place-items:center;
    padding:clamp(24px,7vw,72px) clamp(20px,6vw,48px);
    -webkit-font-smoothing:antialiased;position:relative;overflow-x:hidden;
  }

  /* One warm bloom behind the mark. The ground is otherwise flat, and a page
     that is flat everywhere reads as unfinished rather than as restrained.
     A gradient rather than a blurred circle: blur() over a solid disc banded
     into visible rings on the first screen it was looked at. */
  body::before{
    content:"";position:fixed;inset:0;pointer-events:none;
    background:radial-gradient(60% 42% at 50% 0%, rgba(249,115,22,.14), rgba(249,115,22,0) 70%);
  }

  main{max-width:600px;width:100%;text-align:center;position:relative}

  /* ── The state, as its own object above everything ───────────────────── */
  .state{
    display:inline-flex;align-items:center;gap:9px;
    border:1px solid var(--accent-line);background:var(--accent-wash);
    border-radius:999px;padding:7px 15px;
    font-family:"Plex Mono",ui-monospace,monospace;font-size:11.5px;
    text-transform:uppercase;letter-spacing:.07em;color:var(--accent-ink);
  }
  .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
       animation:pulse 2s ease-in-out infinite}
  @keyframes pulse{50%{opacity:.3}}

  /* ── Brand ───────────────────────────────────────────────────────────────
     `gap` on a flex container applies between EVERY child, and a bare text
     node is a child. Written as one inline-flex row around "Clu", <i>Pilot</i>
     and " Cloud", it spaced the brand out into three separate words — which is
     how the page went out reading "Clu Pilot Cloud". The wordmark is a single
     element now, and the gap only ever separates it from the mark. */
  .brand{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:34px}
  .brand svg{width:36px;height:36px;flex:none}
  .word{font-size:20px;font-weight:700;letter-spacing:-.025em;color:var(--ink)}
  .word span{color:var(--muted);font-weight:600}

  h1{margin-top:26px;font-weight:700;font-size:clamp(2rem,6vw,2.9rem);
     letter-spacing:-.038em;line-height:1.06;color:var(--ink)}
  .lead{margin:18px auto 0;max-width:46ch;font-size:16px;color:var(--muted)}

  /* ── The three promises the paragraph already makes ──────────────────── */
  .points{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:30px}
  .point{
    display:inline-flex;align-items:center;gap:7px;
    border:1px solid var(--line);background:var(--surface);border-radius:999px;
    padding:8px 15px;font-size:14px;font-weight:500;color:var(--body);
  }
  .point svg{width:15px;height:15px;flex:none;stroke:var(--success);stroke-width:2.6;fill:none}

  /* ── Contact ─────────────────────────────────────────────────────────── */
  .contact{margin-top:38px;padding-top:30px;border-top:1px solid var(--line)}
  .contact p{font-size:15px;color:var(--muted)}
  .btn{
    display:inline-flex;align-items:center;gap:9px;margin-top:14px;
    min-height:46px;padding:0 22px;border-radius:11px;
    background:var(--accent-ink);color:#fff;
    font-size:15px;font-weight:600;text-decoration:none;
    transition:background .18s;
  }
  .btn:hover{background:var(--accent-press)}
  .btn svg{width:17px;height:17px;stroke:currentColor;stroke-width:1.9;fill:none}

  .foot{margin-top:34px;font-family:"Plex Mono",ui-monospace,monospace;
        font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}

  @media (prefers-reduced-motion: reduce){.dot{animation:none}}
</style>
@endverbatim
</head>
<body>
<main>
  <span class="state"><span class="dot" aria-hidden="true"></span>{{ __('coming_soon.state') }}</span>

  <div class="brand">
    {{-- The real mark — cloud plus autopilot ascent — not the plain gradient
         tile that stood here. A brand square with nothing in it reads as an
         image that failed to load, which on a "we are still building" page is
         the last impression to leave. --}}
    <svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
      <defs>
        <linearGradient id="cs-mark" x1="0" y1="0" x2="64" y2="64" gradientUnits="userSpaceOnUse">
          <stop stop-color="#FB923C"/><stop offset="0.55" stop-color="#F97316"/><stop offset="1" stop-color="#C2560A"/>
        </linearGradient>
      </defs>
      <rect width="64" height="64" rx="15" fill="url(#cs-mark)"/>
      <path d="M22 41h20a8 8 0 0 0 .7-15.97A11 11 0 0 0 21.4 27.2 8.5 8.5 0 0 0 22 44z" fill="#ffffff" fill-opacity="0.22"/>
      <path d="M32 17 44 44l-12-6-12 6z" fill="#ffffff"/>
    </svg>
    <span class="word">CluPilot <span>Cloud</span></span>
  </div>

  <h1>{{ __('coming_soon.title') }}</h1>
  <p class="lead">{{ __('coming_soon.body') }}</p>

  <div class="points">
    @foreach (['operated', 'backed_up', 'current'] as $point)
      <span class="point">
        <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>
        {{ __("coming_soon.points.{$point}") }}
      </span>
    @endforeach
  </div>

  <div class="contact">
    <p>{{ __('coming_soon.contact') }}</p>
    <a class="btn" href="mailto:office&#64;clupilot.com">
      <svg viewBox="0 0 24 24" aria-hidden="true"><rect x="2" y="4" width="20" height="16" rx="2"/><path d="m22 7-10 6L2 7"/></svg>
      office&#64;clupilot.com
    </a>
  </div>

  <p class="foot">clupilot.com</p>
</main>
</body>
</html>
