AkurAI Build
Menu

Public repository / edcee323076a7fb02387dd40cb06219db46e8579

AkurAI-Drive / site/frontend/index.html

Latest change 00156127153ff4c911951d847296fd116f196769 - Align Drive theme selector with Framework apps by olibuijr

<!doctype html>
<html lang="{{ __locale }}">
<head>
<meta charset="utf-8">
<script>(function(){try{var m=document.cookie.match(/(?:^|; )akurai-theme=([^;]*)/);var t=(m?decodeURIComponent(m[1]):null)||localStorage.getItem("akurai-theme");if(!t)t=matchMedia("(prefers-color-scheme: light)").matches?"akurai-light":"akurai";document.documentElement.setAttribute("data-theme",t)}catch(e){}})()</script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AkurAI Drive — your private cloud, hosted in Iceland</title>
<meta name="description" content="AkurAI Drive is a private, Iceland-hosted file cloud for businesses and teams. Single sign-on with AkurAI, S3-backed storage, your data on infrastructure you control.">
<meta property="og:title" content="AkurAI Drive — your private cloud, hosted in Iceland">
<meta property="og:description" content="A private, Iceland-hosted file cloud. Sign in with AkurAI, unlimited S3-backed storage, real data residency.">
<meta property="og:type" content="website">
<link rel="icon" href="/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Sora:wght@500;600;700;800&family=Inter:wght@400;450;500;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/themes.css">
<style>
  :root{
    --bg2:var(--bg-2); --ink:var(--fg); --faint:color-mix(in srgb, var(--muted) 78%, transparent);
    --brand:var(--accent); --brand2:var(--accent-2); --line:color-mix(in srgb, var(--border) 52%, transparent);
    --line2:color-mix(in srgb, var(--border-2) 36%, transparent); --good:var(--ok); --on-accent:#fff;
    --r:16px; --maxw:1120px;
    --display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
  body::before{content:"";position:fixed;inset:0;z-index:-1;
    background:
      radial-gradient(900px 600px at 78% -8%, color-mix(in srgb, var(--brand) 20%, transparent), transparent 55%),
      radial-gradient(700px 520px at 8% 8%, color-mix(in srgb, var(--brand2) 12%, transparent), transparent 55%),
      linear-gradient(180deg, color-mix(in srgb, var(--bg2) 85%, var(--bg)), var(--bg) 40%)}
  a{color:inherit;text-decoration:none}
  .container{max-width:var(--maxw);margin:0 auto;padding:0 24px}
  .grad{background:linear-gradient(92deg,var(--brand),var(--brand2));-webkit-background-clip:text;background-clip:text;color:transparent}
  h1,h2,h3{font-family:var(--display);letter-spacing:-.02em;line-height:1.08;margin:0}
  .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:500;letter-spacing:.04em;
    color:var(--brand2);border:1px solid var(--line);background:rgba(122,240,208,.05);padding:6px 13px;border-radius:999px}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--brand2);box-shadow:0 0 12px var(--brand2)}
  .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:600;font-size:15px;
    border-radius:12px;padding:12px 20px;cursor:pointer;border:1px solid transparent;transition:.15s;white-space:nowrap}
  .btn-primary{color:var(--on-accent);background:linear-gradient(92deg,var(--brand),var(--brand2));box-shadow:0 12px 34px color-mix(in srgb, var(--brand) 32%, transparent)}
  .btn-primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
  .btn-ghost{color:var(--ink);border-color:var(--line2);background:rgba(255,255,255,.02)}
  .btn-ghost:hover{background:rgba(255,255,255,.06)}
  .btn-sm{padding:9px 15px;font-size:14px}

  /* nav */
  nav{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);background:color-mix(in srgb, var(--bg) 78%, transparent);border-bottom:1px solid var(--line)}
  .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px}
  .brand{display:flex;align-items:center;gap:11px;font-family:var(--display);font-weight:700;font-size:18px}
  .brand small{display:block;font-family:var(--body);font-weight:450;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
  .mark{width:32px;height:32px;flex:none}
  .nav-links{display:flex;align-items:center;gap:8px}
  .nav-links a.txt{color:var(--muted);padding:8px 12px;border-radius:9px;font-size:14.5px;font-weight:500}
  .nav-links a.txt:hover{color:var(--ink);background:rgba(255,255,255,.04)}
  @media(max-width:720px){.nav-links a.txt{display:none}}

  /* lang toggle */
  .lang-toggle{display:inline-flex;align-items:center;border:1px solid var(--line2);border-radius:8px;overflow:hidden}
  .lang-opt{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;font-size:12px;font-weight:700;letter-spacing:.02em;padding:5px 9px;cursor:pointer;line-height:1;transition:background-color .15s ease,color .15s ease}
  .lang-opt+.lang-opt{border-left:1px solid var(--line2)}
  .lang-opt:hover{color:var(--ink)}
  .lang-opt.is-active{background:var(--brand);color:var(--on-accent)}
  .lang-opt:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}

  /* theme picker */
  .theme-picker{display:inline-flex;align-items:center}
  .theme-select{
    appearance:none;-webkit-appearance:none;font:inherit;font-size:13px;font-weight:500;color:var(--ink);
    background:var(--panel);border:1px solid var(--line2);border-radius:8px;padding:6px 28px 6px 11px;cursor:pointer;
    line-height:1.2;max-width:min(170px,42vw);text-overflow:ellipsis;
    background-image:linear-gradient(45deg, transparent 50%, var(--muted) 50%),linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position:calc(100% - 15px) center,calc(100% - 10px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;
    transition:border-color .15s ease,background-color .15s ease
  }
  .theme-select:hover{border-color:var(--line)}
  .theme-select:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
  .theme-select optgroup{color:var(--ink);background:var(--panel);font-weight:700}
  .theme-select option{color:var(--ink);background:var(--panel);font-weight:500}

  /* hero */
  .hero{padding:78px 0 54px}
  .hero h1{font-size:clamp(38px,6.4vw,68px);font-weight:800;margin:18px 0 18px}
  .lede{font-size:clamp(17px,2.2vw,21px);color:var(--muted);max-width:60ch;margin:0 0 30px}
  .btn-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
  .hero-meta{display:flex;gap:22px;flex-wrap:wrap;margin-top:30px;color:var(--faint);font-size:13.5px}
  .hero-meta b{color:var(--muted);font-weight:600}

  /* trust strip */
  .trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:rgba(255,255,255,.015)}
  .trust-in{display:flex;flex-wrap:wrap;gap:14px 34px;align-items:center;justify-content:center;padding:18px 24px;color:var(--faint);font-size:13px}
  .trust-in span{display:inline-flex;align-items:center;gap:8px}
  .trust-in svg{width:16px;height:16px;color:var(--brand2)}

  /* sections */
  section.block{padding:74px 0}
  .sec-head{text-align:center;max-width:660px;margin:0 auto 46px}
  .sec-head h2{font-size:clamp(28px,4vw,40px);font-weight:700}
  .sec-head p{color:var(--muted);margin:14px 0 0;font-size:17px}
  .kicker{color:var(--brand2);font-weight:600;font-size:13px;letter-spacing:.08em;text-transform:uppercase}

  .grid{display:grid;gap:18px}
  .g4{grid-template-columns:repeat(4,1fr)}
  .g3{grid-template-columns:repeat(3,1fr)}
  @media(max-width:920px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}}
  @media(max-width:560px){.g4{grid-template-columns:1fr}}

  .card{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.012))}
  .card .ico{width:26px;height:26px;color:var(--brand);margin-bottom:12px}
  .card h3{font-size:16.5px;font-weight:600;margin-bottom:7px}
  .card p{color:var(--muted);font-size:14.5px;margin:0}

  /* steps */
  .steps{counter-reset:s}
  .step{position:relative;padding-left:60px}
  .step::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:-2px;width:40px;height:40px;border-radius:11px;
    display:grid;place-items:center;font-family:var(--display);font-weight:700;color:var(--on-accent);background:linear-gradient(92deg,var(--brand),var(--brand2))}
  .step h3{font-size:17px;margin-bottom:6px}
  .step p{color:var(--muted);font-size:14.5px;margin:0}

  /* pricing */
  .price-grid{align-items:stretch}
  .plan{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;padding:26px;background:var(--panel)}
  .plan.feat{border-color:color-mix(in srgb, var(--brand) 55%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--brand) 26%, transparent),0 24px 60px color-mix(in srgb, var(--brand) 14%, transparent);position:relative}
  .plan.feat::after{content:"{{ t "plan.pro.badge" }}";position:absolute;top:-11px;left:50%;transform:translateX(-50%);
    font-size:11.5px;font-weight:600;letter-spacing:.04em;color:var(--on-accent);background:linear-gradient(92deg,var(--brand),var(--brand2));padding:4px 12px;border-radius:999px}
  .plan h3{font-size:18px;font-weight:700}
  .plan .price{font-family:var(--display);font-weight:800;font-size:38px;margin:14px 0 2px}
  .plan .price span{font-family:var(--body);font-size:15px;font-weight:500;color:var(--faint)}
  .plan .sub{color:var(--muted);font-size:14px;min-height:40px}
  .plan ul{list-style:none;margin:18px 0 22px;padding:0;display:grid;gap:11px}
  .plan li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:14.5px}
  .plan li svg{width:18px;height:18px;color:var(--good);flex:none;margin-top:1px}
  .plan .btn{justify-content:center;margin-top:auto}

  /* security band */
  .band{border:1px solid var(--line);border-radius:22px;padding:40px;background:
    radial-gradient(600px 300px at 100% 0,color-mix(in srgb, var(--brand2) 14%, transparent),transparent 60%),
    linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.01))}
  .band-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:34px;align-items:center}
  @media(max-width:820px){.band-grid{grid-template-columns:1fr}}
  .band h2{font-size:clamp(24px,3.4vw,32px)}
  .band p{color:var(--muted);margin:14px 0 0}
  .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
  .chip{font-size:13px;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:7px 13px;background:rgba(255,255,255,.02)}

  /* final cta */
  .final{text-align:center;border:1px solid var(--line);border-radius:24px;padding:54px 28px;background:
    radial-gradient(700px 360px at 50% 0,color-mix(in srgb, var(--brand) 18%, transparent),transparent 60%),var(--panel)}
  .final h2{font-size:clamp(28px,4.4vw,44px);font-weight:800}
  .final p{color:var(--muted);max-width:52ch;margin:14px auto 26px;font-size:17px}

  footer{border-top:1px solid var(--line);margin-top:30px;padding:30px 0;color:var(--faint);font-size:13.5px}
  .foot-in{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;align-items:center}
  footer a{color:var(--muted)}footer a:hover{color:var(--ink)}

  /* modal */
  .modal{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:20px;background:color-mix(in srgb, var(--bg) 66%, transparent);backdrop-filter:blur(6px)}
  .modal.open{display:grid}
  .sheet{width:100%;max-width:460px;border:1px solid var(--line2);border-radius:20px;background:var(--panel);
    box-shadow:0 40px 100px rgba(0,0,0,.6);overflow:hidden;animation:pop .18s ease}
  @keyframes pop{from{transform:translateY(8px) scale(.99);opacity:0}to{transform:none;opacity:1}}
  .sheet-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:22px 22px 6px}
  .sheet-h h3{font-size:19px}
  .sheet-h p{color:var(--muted);font-size:13.5px;margin:5px 0 0}
  .x{cursor:pointer;color:var(--faint);background:none;border:0;font-size:22px;line-height:1;padding:2px 4px}
  .x:hover{color:var(--ink)}
  form.create{padding:14px 22px 22px;display:grid;gap:14px}
  .field label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-bottom:6px}
  .field input,.field select{width:100%;background:color-mix(in srgb, var(--bg2) 74%, var(--panel));border:1px solid var(--line2);border-radius:11px;color:var(--ink);
    font-family:var(--body);font-size:15px;padding:11px 13px;outline:none}
  .field input:focus,.field select:focus{border-color:var(--brand)}
  .gate{border:1px dashed color-mix(in srgb, var(--accent) 45%, transparent);border-radius:12px;padding:13px;background:color-mix(in srgb, var(--accent) 8%, transparent)}
  .gate label{color:var(--accent)}
  .gate .hint{font-size:12px;color:var(--faint);margin-top:7px}
  .create .btn{justify-content:center;margin-top:4px}
  .note{font-size:12.5px;color:var(--faint);text-align:center}
  .msg{font-size:13.5px;padding:10px 12px;border-radius:10px;display:none}
  .msg.show{display:block}
  .msg.err{background:color-mix(in srgb, var(--danger) 12%, transparent);color:var(--danger);border:1px solid color-mix(in srgb, var(--danger) 34%, transparent)}
  .msg.ok{background:color-mix(in srgb, var(--good) 10%, transparent);color:var(--good);border:1px solid color-mix(in srgb, var(--good) 30%, transparent)}
</style>
</head>
<body>

<!-- NAV -->
<nav>
  <div class="container nav-in">
    <a class="brand" href="/">
      <svg class="mark" viewBox="0 0 32 32" fill="currentColor" aria-hidden="true"><path fill-rule="evenodd" clip-rule="evenodd" d="M13.38 3.23c1.05-2.23 4.19-2.23 5.24 0l11.05 23.62A2.91 2.91 0 0 1 27.03 31h-3.42c-1.17 0-2.22-.7-2.67-1.78l-2.05-4.93h-5.78l-2.05 4.93A2.9 2.9 0 0 1 8.39 31H4.97a2.91 2.91 0 0 1-2.64-4.15L13.38 3.23ZM16 11.17l-5.13 13.1h10.26L16 11.17Z"/><path d="M10.38 20.54h11.24a2.23 2.23 0 0 1 0 4.46H10.38a2.23 2.23 0 0 1 0-4.46Z"/></svg>
      <span>AkurAI&nbsp;Drive<small>Hosted in Iceland</small></span>
    </a>
    <div class="nav-links">
      <a class="txt" href="#features">{{ t "nav.features" }}</a>
      <a class="txt" href="#pricing">{{ t "nav.pricing" }}</a>
      <a class="txt" href="#how">{{ t "nav.how" }}</a>
      <a class="txt" id="signin-link" href="#">{{ t "nav.signin" }}</a>
      <button class="btn btn-primary btn-sm" data-open-create>{{ t "nav.cta" }}</button>
      <span data-lang-toggle></span>
      <span class="theme-picker" data-theme-picker></span>
    </div>
  </div>
</nav>

<!-- HERO -->
<header class="hero">
  <div class="container">
    <span class="eyebrow"><span class="dot"></span> {{ t "hero.eyebrow" }}</span>
    <h1>{{ t "hero.headline1" }}<br><span class="grad">{{ t "hero.headline2" }}</span></h1>
    <p class="lede">{{ t "hero.lede" }}</p>
    <div class="btn-row">
      <button class="btn btn-primary" data-open-create>{{ t "hero.cta" }}
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
      </button>
      <a class="btn btn-ghost" id="signin-cta" href="#">{{ t "hero.signin" }}</a>
    </div>
    <div class="hero-meta">
      <span><b>SSO</b> {{ t "hero.meta.sso" }}</span>
      <span><b>S3</b> {{ t "hero.meta.s3" }}</span>
      <span><b>🇮🇸</b> {{ t "hero.meta.residency" }}</span>
      <span><b>{{ t "hero.meta.nogatekeeper" }}</b></span>
    </div>
  </div>
</header>

<!-- TRUST -->
<div class="trust">
  <div class="trust-in">
    <span><svg viewBox="0 0 24 24" fill="none"><path d="M12 2 4 6v6c0 5 3.4 8 8 10 4.6-2 8-5 8-10V6l-8-4Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg> {{ t "trust.tls" }}</span>
    <span><svg viewBox="0 0 24 24" fill="none"><rect x="4" y="10" width="16" height="11" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M8 10V7a4 4 0 0 1 8 0v3" stroke="currentColor" stroke-width="1.8"/></svg> {{ t "trust.sso" }}</span>
    <span><svg viewBox="0 0 24 24" fill="none"><path d="M3 7h18M3 7l2-3h14l2 3M5 7v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg> {{ t "trust.storage" }}</span>
    <span><svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/><path d="M3 12h18M12 3c2.5 2.7 2.5 15 0 18" stroke="currentColor" stroke-width="1.6"/></svg> {{ t "trust.region" }}</span>
  </div>
</div>

<!-- FEATURES -->
<section class="block" id="features">
  <div class="container">
    <div class="sec-head">
      <div class="kicker">{{ t "features.kicker" }}</div>
      <h2>{{ t "features.headline" }}</h2>
      <p>{{ t "features.sub" }}</p>
    </div>
    <div class="grid g4">
      <article class="card">
        <svg class="ico" viewBox="0 0 24 24" fill="none"><path d="M12 2 4 6v6c0 5 3.4 8 8 10 4.6-2 8-5 8-10V6l-8-4Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/><path d="m9 12 2 2 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
        <h3>{{ t "feature.identity.title" }}</h3>
        <p>{{ t "feature.identity.body" }}</p>
      </article>
      <article class="card">
        <svg class="ico" viewBox="0 0 24 24" fill="none"><ellipse cx="12" cy="6" rx="8" ry="3" stroke="currentColor" stroke-width="1.8"/><path d="M4 6v12c0 1.7 3.6 3 8 3s8-1.3 8-3V6M4 12c0 1.7 3.6 3 8 3s8-1.3 8-3" stroke="currentColor" stroke-width="1.8"/></svg>
        <h3>{{ t "feature.storage.title" }}</h3>
        <p>{{ t "feature.storage.body" }}</p>
      </article>
      <article class="card">
        <svg class="ico" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.8"/><path d="M3 12h18M12 3c2.5 2.7 2.5 15 0 18M12 3C9.5 5.7 9.5 18 12 21" stroke="currentColor" stroke-width="1.6"/></svg>
        <h3>{{ t "feature.residency.title" }}</h3>
        <p>{{ t "feature.residency.body" }}</p>
      </article>
      <article class="card">
        <svg class="ico" viewBox="0 0 24 24" fill="none"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
        <h3>{{ t "feature.provisioning.title" }}</h3>
        <p>{{ t "feature.provisioning.body" }}</p>
      </article>
    </div>
  </div>
</section>

<!-- HOW IT WORKS -->
<section class="block" id="how" style="padding-top:10px">
  <div class="container">
    <div class="sec-head">
      <div class="kicker">{{ t "how.kicker" }}</div>
      <h2>{{ t "how.headline" }}</h2>
    </div>
    <div class="grid g3 steps">
      <div class="step"><h3>{{ t "how.step1.title" }}</h3><p>{{ t "how.step1.body" }}</p></div>
      <div class="step"><h3>{{ t "how.step2.title" }}</h3><p>{{ t "how.step2.body" }}</p></div>
      <div class="step"><h3>{{ t "how.step3.title" }}</h3><p>{{ t "how.step3.body" }}</p></div>
    </div>
  </div>
</section>

<!-- PRICING -->
<section class="block" id="pricing">
  <div class="container">
    <div class="sec-head">
      <div class="kicker">{{ t "pricing.kicker" }}</div>
      <h2>{{ t "pricing.headline" }}</h2>
      <p>{{ t "pricing.sub" }}</p>
    </div>
    <div class="grid g3 price-grid">
      <div class="plan">
        <h3>{{ t "plan.starter.name" }}</h3>
        <div class="price">2.490&nbsp;kr<span>/mo</span></div>
        <div class="sub">{{ t "plan.starter.sub" }}</div>
        <ul>
          <li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.100gb" }}</li>
          <li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.5members" }}</li>
          <li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.sso" }}</li>
        </ul>
        <button class="btn btn-ghost" data-open-create data-plan="starter">{{ t "plan.starter.cta" }}</button>
      </div>
      <div class="plan feat">
        <h3>{{ t "plan.pro.name" }}</h3>
        <div class="price">6.990&nbsp;kr<span>/mo</span></div>
        <div class="sub">{{ t "plan.pro.sub" }}</div>
        <ul>
          <li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.1tb" }}</li>
          <li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.25members" }}</li>
          <li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.versioning" }}</li>
          <li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.priority" }}</li>
        </ul>
        <button class="btn btn-primary" data-open-create data-plan="pro">{{ t "plan.pro.cta" }}</button>
      </div>
      <div class="plan">
        <h3>{{ t "plan.business.name" }}</h3>
        <div class="price">{{ t "plan.business.price" }}</div>
        <div class="sub">{{ t "plan.business.sub" }}</div>
        <ul>
          <li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.unlimited" }}</li>
          <li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.unlimitedmembers" }}</li>
          <li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.dedicated" }}</li>
          <li><svg viewBox="0 0 24 24" fill="none"><path d="m5 13 4 4 10-10" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg> {{ t "plan.feature.onboarding" }}</li>
        </ul>
        <a class="btn btn-ghost" href="mailto:olibuijr@olibuijr.com?subject=AkurAI%20Drive%20Business">{{ t "plan.business.cta" }}</a>
      </div>
    </div>
  </div>
</section>

<!-- SECURITY BAND -->
<section class="block" style="padding-top:10px">
  <div class="container">
    <div class="band">
      <div class="band-grid">
        <div>
          <div class="kicker">{{ t "security.kicker" }}</div>
          <h2>{{ t "security.headline" }}</h2>
          <p>{{ t "security.body" }}</p>
          <div class="chips">
            <span class="chip">{{ t "security.chip.tls" }}</span><span class="chip">{{ t "security.chip.argon" }}</span>
            <span class="chip">{{ t "security.chip.isolation" }}</span><span class="chip">{{ t "security.chip.signed" }}</span>
            <span class="chip">{{ t "security.chip.audit" }}</span><span class="chip">{{ t "security.chip.residency" }}</span>
          </div>
        </div>
        <div>
          <article class="card" style="background:rgba(255,255,255,.03)">
            <svg class="ico" viewBox="0 0 24 24" fill="none" style="width:30px;height:30px"><rect x="3" y="11" width="18" height="10" rx="2" stroke="currentColor" stroke-width="1.8"/><path d="M7 11V7a5 5 0 0 1 10 0v4" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="16" r="1.6" fill="currentColor"/></svg>
            <h3>{{ t "security.card.title" }}</h3>
            <p>{{ t "security.card.body" }}</p>
          </article>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- FINAL CTA -->
<section class="block" style="padding-top:0">
  <div class="container">
    <div class="final">
      <h2>{{ t "cta.headline1" }} <span class="grad">{{ t "cta.headline2" }}</span>?</h2>
      <p>{{ t "cta.sub" }}</p>
      <div class="btn-row" style="justify-content:center">
        <button class="btn btn-primary" data-open-create>{{ t "cta.primary" }}</button>
        <a class="btn btn-ghost" id="signin-cta2" href="#">{{ t "cta.signin" }}</a>
      </div>
    </div>
  </div>
</section>

<footer>
  <div class="container foot-in">
    <span>{{ t "footer.copy" }}</span>
    <span><a href="https://auth.olibuijr.com">Account</a> · <a href="https://auth.olibuijr.com/health">Status</a> · <a href="https://github.com/olibuijr/AkurAI">AkurAI</a></span>
  </div>
</footer>

<!-- CREATE STORAGE MODAL -->
<div class="modal" id="create-modal" role="dialog" aria-modal="true" aria-labelledby="cm-title">
  <div class="sheet">
    <div class="sheet-h">
      <div>
        <h3 id="cm-title">{{ t "modal.title" }}</h3>
        <p>{{ t "modal.sub" }}</p>
      </div>
      <button class="x" data-close-create aria-label="{{ t "modal.close" }}">×</button>
    </div>
    <form class="create" id="create-form" novalidate>
      <div class="msg" id="cm-msg"></div>
      <div class="field">
        <label for="cm-org">{{ t "modal.org.label" }}</label>
        <input id="cm-org" name="org" type="text" placeholder="{{ t "modal.org.placeholder" }}" required autocomplete="organization">
      </div>
      <div class="field">
        <label for="cm-email">{{ t "modal.email.label" }}</label>
        <input id="cm-email" name="email" type="email" placeholder="you@company.is" required autocomplete="email">
      </div>
      <div class="field">
        <label for="cm-plan">{{ t "modal.plan.label" }}</label>
        <select id="cm-plan" name="plan">
          <option value="starter">{{ t "modal.plan.starter" }}</option>
          <option value="pro" selected>{{ t "modal.plan.pro" }}</option>
          <option value="business">{{ t "modal.plan.business" }}</option>
        </select>
      </div>
      <div class="field gate">
        <label for="cm-gate">{{ t "modal.gate.label" }} <span style="font-weight:400">({{ t "modal.gate.sub" }})</span></label>
        <input id="cm-gate" name="gate" type="password" placeholder="{{ t "modal.gate.label" }}" autocomplete="off" required>
        <div class="hint">{{ t "modal.gate.hint" }}</div>
      </div>
      <button class="btn btn-primary" type="submit" id="cm-submit">{{ t "modal.submit" }}</button>
      <div class="note">{{ t "modal.note" }}</div>
    </form>
  </div>
</div>

<script type="module" src="/theme.js"></script>
<script type="module" src="/lang.js"></script>
<script type="module">
  // Every "sign in" + "Get your Drive" + "Choose plan" CTA routes through the
  // backend OIDC login (/auth/login owns the OAuth state). Storage is created on
  // the authenticated dashboard (/app), so guests sign in first.
  const LOGIN = "/auth/login";
  for (const id of ["signin-link","signin-cta","signin-cta2"]) {
    const el = document.getElementById(id); if (el) el.href = LOGIN;
  }
  document.querySelectorAll("[data-open-create]").forEach(b =>
    b.addEventListener("click", () => { location.href = LOGIN; }));
  const planSel = { value: "" }; // retained: pricing CTAs pass data-plan; dashboard handles plan

  // --- Submit: POST to the gated storage endpoint. The access code travels as a header
  //     (X-Drive-Access-Code); nginx enforces it server-side, then proxies the {org,email,plan}
  //     body to the framework's `storage` collection. The raw auto-API is blocked, so the gate
  //     cannot be bypassed by posting directly. ---
  const STORAGE_ENDPOINT = "/api/storage";
  const form = document.getElementById("create-form");
  const msg = document.getElementById("cm-msg");
  const submit = document.getElementById("cm-submit");
  const showMsg = (text, kind) => { msg.textContent = text; msg.className = "msg show " + kind; };
  form.addEventListener("submit", async (e) => {
    e.preventDefault();
    msg.className = "msg";
    const code = form.gate.value;
    const body = { org: form.org.value.trim(), email: form.email.value.trim(), plan: form.plan.value };
    if (!body.org || !body.email || !code) { showMsg("{{ t "modal.err.required" }}", "err"); return; }
    submit.disabled = true; submit.textContent = "…";
    try {
      const res = await fetch(STORAGE_ENDPOINT, {
        method: "POST",
        headers: { "Content-Type": "application/json", "X-Drive-Access-Code": code },
        body: JSON.stringify(body)
      });
      if (res.ok) {
        showMsg("{{ t "modal.ok" }}", "ok");
        form.reset();
      } else if (res.status === 401 || res.status === 403) {
        showMsg("{{ t "modal.err.access" }}", "err");
      } else {
        const t = await res.text().catch(() => "");
        showMsg("{{ t "modal.err.generic" }} " + (t.slice(0, 120) || "{{ t "modal.err.network" }}"), "err");
      }
    } catch (err) {
      showMsg("{{ t "modal.err.network" }}", "err");
    } finally {
      submit.disabled = false; submit.textContent = "{{ t "modal.submit" }}";
    }
  });
</script>
</body>
</html>