Aevra - Intelligence that expands what you can imagine.

Build a single, standalone, production-ready index.html file.
All CSS must be inside one <style> block in <head>.
All JavaScript must be inside one <script> block immediately before </body>.
Use:
No frameworks
No React
No Tailwind
No external JavaScript libraries
No external images
No video
No canvas
No WebGL
No image-based background
The only external resource allowed is the Google Font specified below
The result should feel like a polished, modern, highly creative AI startup landing page — minimal, futuristic, soft, premium, and editorial rather than looking like a generic SaaS template.
The company is called:
Aevra
Aevra is an intelligent AI workspace designed for thinking, researching, creating, planning, and solving complex problems.
The page consists of ONE full-viewport hero section.

1. DOCUMENT HEAD
Use:
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

Page title:
Aevra — Intelligence, expanded.

Load Google Font:
https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap

Add preconnects for:
https://fonts.googleapis.com
https://fonts.gstatic.com

with crossorigin on the second one.
Body font stack:
"Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif

Also use:
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;


2. DESIGN DIRECTION
Do NOT create a jungle aesthetic.
Do NOT create anything nature themed.
Do NOT use leaves, flowers, landscapes, trees, forests, or organic jungle imagery.
Do NOT use video anywhere.
Instead, the visual identity should feel like:
intelligent
abstract
futuristic
soft
dimensional
premium
calm
experimental
sophisticated
Imagine a mixture of a modern AI research company, an experimental design studio, and a premium operating system.
The page should use a bright warm-gray/off-white base with floating colorful light forms in the background.
The background itself should be one of the main visual features.

3. DESIGN TOKENS
Use:
:root {
  --ink: #121218;
  --muted: #686876;
  --surface: #f7f7fa;
  --glass: rgba(255,255,255,0.58);
  --glass-strong: rgba(255,255,255,0.78);

  --violet: #806dff;
  --blue: #73cfff;
  --peach: #ffb996;
  --pink: #e9a7ff;

  --shell: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

Global:
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  overflow-x: hidden;
}

body {
  background: var(--surface);
  color: var(--ink);
}

body.menu-open {
  overflow: hidden;
}


4. HERO
Structure:
<section class="hero">

  <div class="ambient" aria-hidden="true">
    ...
  </div>

  <div class="hero__inner">
    ...
  </div>

</section>

Hero:
.hero {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 650px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  background: #f7f7fa;
}

.hero__inner:
.hero__inner {
  position: relative;
  z-index: 10;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}


5. CREATIVE ABSTRACT BACKGROUND
THIS REPLACES THE VIDEO ENTIRELY.
Do not add a <video> element anywhere.
Create the background entirely with HTML + CSS.
Structure inside .ambient:
<div class="ambient__grid"></div>

<div class="orb orb--one"></div>
<div class="orb orb--two"></div>
<div class="orb orb--three"></div>
<div class="orb orb--four"></div>

<div class="orbit orbit--one"></div>
<div class="orbit orbit--two"></div>

<div class="spark spark--one"></div>
<div class="spark spark--two"></div>
<div class="spark spark--three"></div>

Base:
.ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

Add a very soft background wash using multiple CSS radial gradients:
.ambient {
  background:
    radial-gradient(circle at 18% 20%, rgba(128,109,255,.13), transparent 32%),
    radial-gradient(circle at 82% 24%, rgba(115,207,255,.14), transparent 30%),
    radial-gradient(circle at 55% 88%, rgba(255,185,150,.13), transparent 32%),
    #f7f7fa;
}

DOT GRID
.ambient__grid should cover most of the viewport.
Create a subtle dotted technical grid using:
background-image:
  radial-gradient(
    circle,
    rgba(20,20,30,.11) 1px,
    transparent 1.15px
  );

background-size: 28px 28px;

Make it very faint.
Use a mask so the grid is strongest near the center and fades away around the edges:
-webkit-mask-image:
  radial-gradient(
    ellipse at center,
    black 0%,
    rgba(0,0,0,.8) 35%,
    transparent 78%
  );

mask-image:
  radial-gradient(
    ellipse at center,
    black 0%,
    rgba(0,0,0,.8) 35%,
    transparent 78%
  );

Opacity approximately:
opacity: .35;

The grid must NEVER overpower the content.

6. GRADIENT ORBS
All orbs:
.orb {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  filter: blur(2px);
}

Each orb should use a gradient internally instead of being a flat-colored circle.
ORB ONE
Large purple orb near the upper-left.
Approximately:
width: 540px;
height: 540px;
left: -170px;
top: -180px;

Background:
radial-gradient(
  circle at 62% 62%,
  rgba(255,255,255,.9) 0%,
  rgba(205,197,255,.75) 20%,
  rgba(128,109,255,.45) 49%,
  rgba(128,109,255,0) 74%
)

Opacity:
.82


ORB TWO
Large blue/cyan orb toward the right.
Approximately:
width: 500px;
height: 500px;
right: -130px;
top: 12%;

Use white → cyan → blue transparency.
It should feel almost like diffused light passing through glass.

ORB THREE
Large peach/pink orb near bottom center-right.
Approximately:
width: 590px;
height: 590px;
bottom: -340px;
left: 47%;

Use:
warm peach
subtle pink
transparent edges
Keep it soft.

ORB FOUR
A smaller accent orb behind the central text/prompt region.
Approximately:
width: 220px;
height: 220px;
left: 20%;
bottom: 14%;

It should be much more subtle than the others.
Use a violet-to-pink radial gradient.
Opacity around .22.

7. ORBITAL RINGS
Add two extremely subtle elliptical orbital rings.
They should NOT look like literal planets.
They are abstract geometric design elements.
Use borders such as:
border: 1px solid rgba(30,30,45,.09);

Large ring example:
.orbit--one {
  width: 760px;
  height: 290px;
  border-radius: 50%;
  right: -180px;
  top: 19%;
  transform: rotate(-18deg);
}

Second:
.orbit--two {
  width: 480px;
  height: 190px;
  border-radius: 50%;
  left: -130px;
  bottom: 10%;
  transform: rotate(24deg);
}

Parts of the rings should naturally disappear outside the viewport.
Keep them elegant and almost invisible.

8. SMALL SPARK ELEMENTS
Create three tiny decorative circular elements.
Examples:
7px purple dot
5px blue dot
9px translucent glass dot
Give one of them a soft box shadow.
Example:
box-shadow:
  0 0 0 7px rgba(128,109,255,.07),
  0 8px 24px rgba(128,109,255,.18);

Position them around empty areas of the composition.
Do NOT place them too close to text.

9. BACKGROUND MOTION
The background should feel slightly alive.
Create three slow animations:
@keyframes drift-a {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  50% { transform: translate3d(22px,18px,0) scale(1.04); }
}

@keyframes drift-b {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(-18px,24px,0) rotate(3deg); }
}

@keyframes drift-c {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(16px,-20px,0); }
}

Animation durations should be long:
14s
17s
20s
24s
Use:
ease-in-out infinite

Different elements must move at different speeds.
The effect should be barely noticeable.
This is ambient motion, NOT an animated wallpaper.

10. NAVIGATION
Desktop navbar:
.nav {
  position: relative;
  z-index: 70;
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 27px 24px 0;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
}

Three primary sections:
Brand
Navigation
CTA
A hamburger is the fourth child but hidden on desktop.

11. BRAND
Company name:
Aevra

Do NOT reuse the JungleMind diamond logo.
Create a new minimal SVG symbol.
Use a 32×32 SVG.
Concept:
Two offset curved/rounded forms creating an abstract letter A / aperture / intelligence portal.
Use simple SVG geometry.
It should look good in monochrome.
No gradients inside the logo.
Logo color:
#141419

Brand styling:
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.035em;
}

SVG:
width: 29px;
height: 29px;
display: block;


12. DESKTOP NAVIGATION LINKS
Links:
Product
Developers
Research
Company

Use:
.nav__links {
  display: flex;
  align-items: center;
  gap: 38px;
  list-style: none;
  margin: 0;
  padding: 0;
}

Links:
font-size: 14.5px;
font-weight: 500;
color: rgba(18,18,24,.82);
text-decoration: none;

Hover:
opacity: .5;

Smooth transition around 180ms.

13. CTA BUTTON
Desktop CTA label:
Start building

Use a dark pill-like button rather than a very rounded SaaS pill.
.btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 12px 20px;

  border: 0;
  border-radius: 10px;

  background: #15151b;
  color: #fff;

  font-family: inherit;
  font-size: 14px;
  font-weight: 600;

  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  box-shadow:
    0 1px 1px rgba(0,0,0,.08),
    0 8px 24px rgba(20,20,30,.12);

  transition:
    transform .22s var(--ease),
    background .18s ease,
    box-shadow .22s ease;
}

Hover:
transform: translateY(-2px);
background: #000;
box-shadow:
  0 2px 3px rgba(0,0,0,.1),
  0 13px 30px rgba(20,20,30,.17);


14. CENTER HERO STACK
.stage:
.stage {
  flex: 1 1 auto;
  min-height: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;

  padding: 34px 24px 48px;

  gap: clamp(17px, 2.4vh, 25px);
}

The content should be visually centered but can sit approximately 2–3% lower than mathematical center to account for the navbar.

15. ANNOUNCEMENT BADGE
Content:
<span class="badge__tag">New</span>
<span>Aevra One is now available</span>

Style:
.badge {
  display: inline-flex;
  align-items: center;
  gap: 11px;

  padding: 6px 14px 6px 6px;

  background: rgba(255,255,255,.62);

  border:
    1px solid rgba(30,30,45,.08);

  border-radius: 999px;

  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);

  box-shadow:
    0 6px 24px rgba(40,35,80,.06);

  font-size: 13px;
  font-weight: 500;
  color: #5f5f6c;
}

.badge__tag:
background: #15151b;
color: #fff;

padding: 4px 10px;
border-radius: 999px;

font-size: 11.5px;
font-weight: 600;
letter-spacing: .01em;


16. HEADLINE
Exact copy:
Intelligence that expands
what you can imagine.

Desktop should show EXACTLY two lines.
Markup:
<h1 class="headline">
  Intelligence that expands<br class="brk">
  what you can imagine.
</h1>

Style:
.headline {
  margin: 0;

  font-size: clamp(40px, 5.6vw, 76px);
  line-height: .99;

  font-weight: 600;
  letter-spacing: -.055em;

  max-width: 16ch;
}

Do NOT use a gradient fill on all the headline text.
Keep the typography primarily dark.
However, give the word:
imagine.

a very subtle special treatment.
Wrap it:
<span class="headline__accent">imagine.</span>

Use:
.headline__accent {
  position: relative;
  display: inline-block;
}

Add a very subtle colored glow behind it using ::after.
The text itself must remain dark.
Example glow:
.headline__accent::after {
  content: "";
  position: absolute;
  z-index: -1;

  left: 4%;
  right: -4%;
  bottom: 5%;

  height: 30%;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      rgba(128,109,255,.18),
      rgba(115,207,255,.17),
      rgba(233,167,255,.14)
    );

  filter: blur(13px);
}

This should be elegant and subtle.

17. HERO SUBCOPY
Exact copy:
Aevra turns complex questions into clear direction, combining research,
reasoning, and creation inside one intelligent workspace.

Desktop markup:
<p class="sub">
  Aevra turns complex questions into clear direction, combining research,<br class="brk">
  reasoning, and creation inside one intelligent workspace.
</p>

Style:
.sub {
  margin: 0;

  max-width: 680px;

  color: var(--muted);

  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 1.65;

  font-weight: 400;
  letter-spacing: -.008em;
}


18. LINE BREAK BEHAVIOR
Default:
.brk {
  display: none;
}

At widths above 900px:
@media (min-width: 901px) {
  .brk {
    display: inline;
  }

  .stage .headline,
  .stage .sub {
    max-width: none;
  }
}

Desktop headline and subcopy must visually look deliberately typeset, not automatically wrapped.

19. AI PROMPT COMPOSER
Under the text, create a premium floating AI prompt composer.
Structure:
<form class="prompt" onsubmit="return false;">

  <label class="sr-only" for="prompt-input">
    Ask Aevra
  </label>

  <textarea
    id="prompt-input"
    class="prompt__input"
    rows="3"
    placeholder="Ask Aevra anything..."
  ></textarea>

  <div class="prompt__bar">

    <button class="icon-btn" type="button" aria-label="Add attachment">
      ...
    </button>

    <div class="prompt__right">

      <button
        class="mode-btn"
        type="button"
        aria-label="Reasoning mode"
      >
        ...
        <span>Think</span>
      </button>

      <button
        class="icon-btn icon-btn--send"
        type="submit"
        aria-label="Send message"
      >
        ...
      </button>

    </div>

  </div>

</form>

Width:
width: min(780px, 100%);

Card:
.prompt {
  position: relative;

  width: min(780px, 100%);

  padding: 20px 18px 14px;

  margin-top: clamp(5px, 1.2vh, 13px);

  text-align: left;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.79),
      rgba(255,255,255,.49)
    );

  border:
    1px solid rgba(255,255,255,.78);

  border-radius: 22px;

  -webkit-backdrop-filter:
    blur(24px) saturate(1.25);

  backdrop-filter:
    blur(24px) saturate(1.25);

  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 0 0 1px rgba(20,20,30,.04),
    0 24px 65px -26px rgba(34,30,70,.24);
}

Add a soft colored glow behind the prompt card using:
.prompt::before

It should use blurred violet/blue/peach radial gradients.
It must stay behind the card.
It should extend approximately 40px outside the card.
Opacity around .35.

20. TEXTAREA
.prompt__input {
  width: 100%;

  min-height: clamp(62px, 9vh, 94px);

  border: 0;
  outline: 0;
  resize: none;

  padding: 4px 5px;

  background: transparent;

  font-family: inherit;

  font-size: 16.5px;
  line-height: 1.5;

  color: var(--ink);
}

Placeholder:
color: #787883;
opacity: 1;


21. PROMPT TOOLBAR
.prompt__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  margin-top: 7px;
}

Right side:
.prompt__right {
  display: flex;
  align-items: center;
  gap: 9px;
}


22. ATTACHMENT BUTTON
Circular glass button.
Approximately:
width: 40px;
height: 40px;
border-radius: 50%;

Background:
rgba(255,255,255,.76)

Border:
1px solid rgba(20,20,30,.08)

Use a simple plus icon.
SVG:
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
  <path d="M12 5v14M5 12h14"/>
</svg>

Use:
stroke-width="1.9"
stroke-linecap="round"


23. THINK BUTTON
Instead of copying the microphone button from the original design, create something more relevant to an AI workspace.
Button label:
Think

Create a tiny spark/star icon on the left.
Style:
.mode-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  height: 40px;
  padding: 0 13px;

  border:
    1px solid rgba(20,20,30,.08);

  border-radius: 11px;

  background:
    rgba(255,255,255,.62);

  color: #454550;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
}

On hover:
background gets slightly brighter
translateY(-1px)
Do not make it look like the main CTA.

24. SEND BUTTON
Dark rounded square:
.icon-btn--send {
  width: 44px;
  height: 44px;

  border-radius: 12px;

  background: #15151b;
  color: #fff;
  border-color: #15151b;

  box-shadow:
    0 8px 22px rgba(20,20,28,.16);
}

Arrow icon:
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor">
  <path d="M5 12h13M13 7l5 5-5 5"/>
</svg>

Stroke width:
1.9

Use rounded caps and joins.

25. PAGE ENTRANCE ANIMATION
Use:
@keyframes rise {
  from {
    opacity: 0;
    transform: translate3d(0,18px,0);
  }

  to {
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}

@keyframes soft-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.ambient fades in over approximately:
1.2s

.rise:
.rise {
  animation:
    rise .9s var(--ease) both;

  animation-delay:
    calc(var(--i, 0) * 65ms);
}

Use stagger values:
Logo SVG                 0
Brand wordmark           1
Product link             2
Developers link          3
Research link            4
Company link             5
Desktop CTA              6
Hamburger                6

Badge                     8
Headline                 10
Subcopy                  12
Prompt composer          14

Attachment               16
Think                    17
Send                     18

Do not animate layout-affecting properties.
Only use:
opacity
transform

26. SUBTLE POINTER PARALLAX
On devices with a fine pointer only, add extremely subtle pointer movement to the ambient background.
JavaScript may update:
--mx
--my

between approximately -1 and 1.
Use those variables only to shift selected background elements by roughly:
4–14px

depending on element depth.
Do NOT move:
headline
navbar
prompt card
buttons
text
Only background decorations.
The effect should be subtle enough that some users may not consciously notice it.
Disable it on touch devices.

27. MOBILE MENU BUTTON
Use the same polished two-line hamburger concept.
Markup:
<button
  class="nav__toggle"
  id="menu-toggle"
  type="button"
  aria-label="Open menu"
  aria-expanded="false"
  aria-controls="site-menu"
>
  <span class="nav__toggle-box" aria-hidden="true">
    <span class="bar bar--top"></span>
    <span class="bar bar--bot"></span>
  </span>
</button>

Closed:
first line full width
second line around 68% width
Open:
transform into an X
Animation:
0.5–0.55s

using var(--ease).

28. IMPORTANT CTA SPECIFICITY
Include:
.nav .menu__cta {
  display: none;
}

This is required so the mobile-menu CTA does not accidentally appear at tablet widths.

29. TABLET/MOBILE MENU
At:
@media (max-width: 900px)

Switch navbar from grid to flex.
Use:
.nav {
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 19px 20px 0;
}

Brand:
margin-right: auto;

Show hamburger.
The full-screen mobile menu must be:
position: fixed;
inset: 0;

Use a nearly opaque soft background:
background:
  radial-gradient(
    circle at 20% 15%,
    rgba(128,109,255,.12),
    transparent 32%
  ),
  radial-gradient(
    circle at 90% 80%,
    rgba(115,207,255,.13),
    transparent 34%
  ),
  #f9f9fc;

The mobile menu should NOT show the hero content beneath it.
Menu links:
Product
Developers
Research
Company

Large centered typography:
font-size: clamp(28px, 7.5vw, 36px);
font-weight: 600;
letter-spacing: -.035em;

Animate links upward from hidden masks.
Stagger them.
Use a slower entrance and faster closing.

30. PHONE BREAKPOINT
At:
@media (max-width: 640px)

Requirements:
.hero {
  min-height: 580px;
}

Hide desktop CTA.
Show:
Start building

inside the mobile menu.
Stage approximately:
padding:
  18px 18px 24px;

gap:
  15px;

Headline:
font-size:
  clamp(32px, 10.5vw, 46px);

line-height:
  1.02;

max-width:
  11.5ch;

Subcopy:
font-size:
  14px;

line-height:
  1.6;

max-width:
  39ch;

Badge:
12px typography

Prompt:
border-radius:
  18px;

padding:
  15px 13px 11px;

Textarea MUST stay:
font-size: 16px;

Do not use anything below 16px for the mobile textarea because Safari may zoom on focus.

31. MOBILE BACKGROUND COMPOSITION
The desktop ambient composition must adapt on mobile rather than simply being cropped.
At max-width: 640px:
shrink the large purple orb
move it toward the upper-left
move blue orb toward upper-right
place peach glow near the bottom
hide one of the orbital rings
reduce the grid opacity
reduce overall background visual intensity by roughly 15%
Do not let an orb make the headline difficult to read.
The center behind text should remain relatively quiet.

32. LANDSCAPE PHONES
Use:
@media (max-height: 560px) and (orientation: landscape)

Allow the hero to grow vertically:
.hero {
  height: auto;
  min-height: 100svh;
}

Reduce vertical spacing slightly.
Set textarea minimum height around:
48px


33. REDUCED MOTION
Use:
@media (prefers-reduced-motion: reduce)

Requirements:
Disable entrance animations.
Disable orb drift.
Disable orbital motion.
Disable pointer parallax.
Keep all content visible.
Mobile hamburger must still correctly transform into an X.
Menu open/close transitions may become almost instant.
Do not hide background elements entirely.
The static composition should still look beautiful.

34. JAVASCRIPT
Use vanilla JavaScript wrapped inside an IIFE.
Handle mobile navigation.
Get:
#menu-toggle
#site-menu

If either is unavailable, safely bail out.
Create:
setMenu(open)

which:
toggle.setAttribute(
  'aria-expanded',
  String(open)
);

Updates aria label:
open
  ? 'Close menu'
  : 'Open menu'

Toggle:
.is-open

on menu.
Toggle:
.menu-open

on body.
isOpen() must use:
toggle.getAttribute('aria-expanded') === 'true'

Behaviors:
Hamburger click opens/closes menu.
Clicking any menu link closes it.
Escape closes an open menu.
After Escape, focus returns to hamburger.
If viewport grows past 900px, close the mobile menu.
Do not leave body scroll locked after resizing to desktop.

35. OPTIONAL PROMPT INTERACTION
Make the composer feel functional without building a backend.
When the textarea is empty and Send is clicked:
briefly focus the textarea
do nothing else
When there is text:
briefly animate the send button
change placeholder after approximately 300ms to:
Aevra is thinking...

Then after approximately 900ms change it back to:
Ask Aevra anything...

Clear the textarea.
Do NOT create a fake chatbot response.
Do NOT open an alert.
Do NOT redirect.
This interaction is only there to make the hero feel alive.

36. THINK MODE INTERACTION
Clicking the Think button toggles an active state.
Inactive:
Think

Active:
Deep thinking

Active appearance:
slightly violet-tinted background
darker text
subtle violet border
Set:
aria-pressed

correctly.

37. ACCESSIBILITY
Ensure:
proper button types
visible keyboard focus states
sensible aria labels
aria-expanded on hamburger
aria-controls
aria-pressed on Think mode
decorative ambient elements use aria-hidden="true"
sufficient contrast
semantic <header>, <nav>, <main> where appropriate
textarea has an accessible label
Use a reusable .sr-only class.

38. HOVER DETAILS
Desktop should contain small premium interaction details.
Examples:
Navbar links:
opacity transition
CTA:
moves up 2px
Prompt attachment:
background brightens
Think:
moves up 1px
Send:
moves up 1px
shadow deepens
Brand icon:
optionally rotate or scale by approximately 2deg / 1.02 on brand hover
Do NOT overanimate.

39. VISUAL PRIORITY
The composition must follow this visual hierarchy:
Headline
Prompt composer
Subcopy
Badge
Navbar
Background details
Background decorations should make the design memorable without reducing readability.

40. THINGS TO AVOID
Do NOT:
use video
use photos
use external background images
use jungle visuals
use nature motifs
copy JungleMind
reuse the JungleMind name
reuse JungleMind's copy
use the same diamond logo
make the entire page purple
put a giant gradient directly over the headline
use dark mode
use excessive glassmorphism
add dozens of floating blobs
make orbs look like random circles
use heavy shadows
use cheesy AI robot icons
use brain icons
use circuit-board illustrations
use neon cyberpunk aesthetics
add scroll sections below the hero
create fake testimonials
add pricing cards
add unnecessary footer content
The goal is ONE exceptional hero section.

41. RESPONSIVE ACCEPTANCE CHECKS
Test conceptually at:
320px
375px
430px
640px
768px
900px
1024px
1280px
1440px
1512px
1920px

Requirements:
No horizontal scrollbar.
Nothing gets clipped unexpectedly.
At 320px the logo and hamburger do not collide.
Hero remains visually balanced.
Orbs reposition appropriately.
Prompt card fits without touching viewport edges.
Mobile textarea remains at least 16px.
Navbar CTA is not duplicated.
Hamburger appears at ≤900px.
Desktop navigation appears above 900px.
Full-screen menu fully hides hero content while open.
Logo and hamburger/X appear above mobile menu.
Desktop headline is deliberately typeset into two lines.
Background remains attractive at ultra-wide widths.
No video element exists anywhere.
No background images are downloaded.
Background is created completely from CSS and HTML decorative elements.

42. FINAL DESIGN GOAL
The finished page should immediately look like a real, premium AI company rather than a template.
It should communicate:
clarity + intelligence + imagination + depth.
The visual identity should come primarily from:
oversized refined typography
large diffused gradient orbs
glass-like depth
faint orbital geometry
a fading technical dot grid
controlled negative space
subtle motion
a highly polished prompt composer
The design should feel creative even when all animations are disabled.
Do not simply reproduce the old layout with different colors.
Use the specification as a foundation, but make the final composition feel intentionally designed for Aevra.
Return ONLY the complete index.html code with no explanation before or after it.