Reduce AI Token Burn /* ── Reset & Base ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --ink: #0A0A0F; --ink2: #1C1B2E; --ink3: #2E2C4A; --surface: #F5F4F0; --muted: #9896B0; --accent: #5B4EFF; --accent2: #00C9A7; --accent3: #FF5B5B; --gold: #F5C842; --font-head: 'Syne', sans-serif; --font-mono: 'DM Mono', monospace; --font-body: 'DM Sans', sans-serif; } .arad-root { font-family: var(--font-body); background: var(--ink); color: var(--surface); overflow-x: hidden; } /* ── Noise texture overlay ── */ .arad-root::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); opacity: 0.03; pointer-events: none; z-index: 0; } /* ── NAV ── */ .arad-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; padding: 20px 48px; background: rgba(10,10,15,0.7); backdrop-filter: blur(18px); border-bottom: 1px solid rgba(91,78,255,0.12); } .arad-logo { font-family: var(--font-head); font-weight: 800; font-size: 22px; letter-spacing: -0.5px; color: var(--surface); text-decoration: none; display: flex; align-items: center; gap: 10px; } .arad-logo-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 12px var(--accent2); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 10px var(--accent2); transform: scale(1); } 50% { box-shadow: 0 0 22px var(--accent2); transform: scale(1.3); } } .arad-nav-links { display: flex; align-items: center; gap: 36px; list-style: none; } .arad-nav-links a { font-family: var(--font-mono); font-size: 13px; font-weight: 400; color: var(--muted); text-decoration: none; letter-spacing: 0.02em; transition: color 0.2s; } .arad-nav-links a:hover { color: var(--surface); } .arad-nav-cta { background: var(--accent); color: #fff !important; padding: 10px 22px; border-radius: 6px; font-weight: 500 !important; transition: background 0.2s, box-shadow 0.2s !important; } .arad-nav-cta:hover { background: #7265ff !important; box-shadow: 0 0 24px rgba(91,78,255,0.5) !important; color: #fff !important; } /* ── HERO ── */ .arad-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 140px 24px 80px; overflow: hidden; } /* gradient orbs */ .arad-orb { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; opacity: 0.28; } .arad-orb-1 { width: 600px; height: 600px; background: var(--accent); top: -160px; left: -180px; animation: drift1 12s ease-in-out infinite; } .arad-orb-2 { width: 500px; height: 500px; background: var(--accent2); bottom: -100px; right: -120px; animation: drift2 10s ease-in-out infinite; } .arad-orb-3 { width: 300px; height: 300px; background: var(--gold); top: 40%; left: 55%; animation: drift3 14s ease-in-out infinite; opacity: 0.14; } @keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(40px,30px)} } @keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,-40px)} } @keyframes drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(20px,-20px)} } .arad-eyebrow { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent2); margin-bottom: 24px; display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; animation: fadeUp 0.7s ease both; } .arad-eyebrow::before, .arad-eyebrow::after { content: ''; display: block; width: 40px; height: 1px; background: var(--accent2); opacity: 0.5; } .arad-hero-headline { font-family: var(--font-head); font-weight: 800; font-size: clamp(44px, 7vw, 88px); line-height: 1.0; letter-spacing: -2px; color: var(--surface); max-width: 900px; position: relative; z-index: 1; animation: fadeUp 0.8s 0.1s ease both; } .arad-hero-headline em { font-style: normal; background: linear-gradient(135deg, var(--accent2) 0%, var(--accent) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .arad-hero-sub { font-family: var(--font-body); font-size: clamp(16px, 2.2vw, 20px); font-weight: 300; color: var(--muted); max-width: 600px; line-height: 1.7; margin-top: 28px; position: relative; z-index: 1; animation: fadeUp 0.8s 0.2s ease both; } .arad-hero-actions { display: flex; gap: 16px; margin-top: 44px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; animation: fadeUp 0.8s 0.3s ease both; } .arad-btn-primary { background: var(--accent); color: #fff; padding: 16px 36px; border-radius: 8px; font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; text-decoration: none; border: none; cursor: pointer; transition: all 0.2s; box-shadow: 0 0 0 rgba(91,78,255,0); } .arad-btn-primary:hover { background: #7265ff; box-shadow: 0 8px 40px rgba(91,78,255,0.5); transform: translateY(-2px); } .arad-btn-ghost { background: transparent; color: var(--surface); padding: 16px 36px; border-radius: 8px; font-family: var(--font-head); font-weight: 600; font-size: 15px; text-decoration: none; border: 1px solid rgba(245,244,240,0.2); cursor: pointer; transition: all 0.2s; } .arad-btn-ghost:hover { border-color: var(--accent2); color: var(--accent2); transform: translateY(-2px); } /* ── COMMAND TERMINAL ── */ .arad-terminal { margin-top: 72px; width: 100%; max-width: 720px; background: rgba(28,27,46,0.85); border: 1px solid rgba(91,78,255,0.25); border-radius: 12px; padding: 0; overflow: hidden; position: relative; z-index: 1; backdrop-filter: blur(12px); animation: fadeUp 0.9s 0.4s ease both; box-shadow: 0 32px 80px rgba(0,0,0,0.5); } .arad-terminal-bar { background: rgba(46,44,74,0.9); padding: 12px 18px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(91,78,255,0.15); } .arad-dot { width: 12px; height: 12px; border-radius: 50%; } .arad-dot-r { background: #FF5B5B; } .arad-dot-y { background: var(--gold); } .arad-dot-g { background: var(--accent2); } .arad-terminal-title { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-left: 8px; } .arad-terminal-body { padding: 24px 28px 28px; font-family: var(--font-mono); font-size: 13px; line-height: 1.9; } .arad-t-comment { color: #4D4B6B; } .arad-t-prompt { color: var(--accent2); } .arad-t-cmd { color: var(--surface); } .arad-t-key { color: var(--accent); } .arad-t-val { color: var(--gold); } .arad-t-ok { color: var(--accent2); } .arad-t-dim { color: var(--muted); } .arad-t-cursor { display: inline-block; width: 8px; height: 14px; background: var(--accent2); vertical-align: middle; animation: blink 1.1s step-end infinite; margin-left: 2px; } @keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} } /* ── NO-PIPELINE BADGES ── */ .arad-badges { display: flex; gap: 12px; margin-top: 44px; flex-wrap: wrap; justify-content: center; position: relative; z-index: 1; animation: fadeUp 0.8s 0.5s ease both; } .arad-badge { display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 100px; border: 1px solid rgba(245,244,240,0.1); background: rgba(28,27,46,0.5); font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .arad-badge-icon { font-size: 14px; } /* ── SECTION SHARED ── */ .arad-section { position: relative; z-index: 1; padding: 120px 48px; max-width: 1160px; margin: 0 auto; } .arad-section-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent2); margin-bottom: 16px; } .arad-section-headline { font-family: var(--font-head); font-weight: 800; font-size: clamp(32px, 4vw, 52px); letter-spacing: -1.5px; line-height: 1.05; color: var(--surface); max-width: 700px; margin-bottom: 20px; } .arad-section-sub { font-size: 17px; font-weight: 300; color: var(--muted); max-width: 560px; line-height: 1.7; margin-bottom: 64px; } /* ── HOW IT WORKS ── */ .arad-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 2px; background: rgba(91,78,255,0.15); border-radius: 16px; overflow: hidden; border: 1px solid rgba(91,78,255,0.2); } .arad-step { background: var(--ink2); padding: 40px 32px; position: relative; transition: background 0.2s; } .arad-step:hover { background: var(--ink3); } .arad-step-num { font-family: var(--font-head); font-size: 48px; font-weight: 800; color: rgba(91,78,255,0.2); line-height: 1; margin-bottom: 20px; } .arad-step-icon { font-size: 28px; margin-bottom: 16px; display: block; } .arad-step-title { font-family: var(--font-head); font-weight: 700; font-size: 17px; color: var(--surface); margin-bottom: 10px; } .arad-step-desc { font-size: 14px; font-weight: 300; color: var(--muted); line-height: 1.7; } .arad-step-arrow { position: absolute; top: 50%; right: -14px; transform: translateY(-50%); width: 28px; height: 28px; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; z-index: 2; } /* ── WHAT GETS GENERATED ── */ .arad-generates { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; } .arad-gen-card { background: var(--ink2); border: 1px solid rgba(245,244,240,0.06); border-radius: 12px; padding: 32px 28px; position: relative; overflow: hidden; transition: border-color 0.2s, transform 0.2s; } .arad-gen-card:hover { border-color: rgba(91,78,255,0.4); transform: translateY(-4px); } .arad-gen-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; } .arad-gen-card.c-blue::before { background: linear-gradient(90deg, var(--accent), transparent); } .arad-gen-card.c-green::before { background: linear-gradient(90deg, var(--accent2), transparent); } .arad-gen-card.c-red::before { background: linear-gradient(90deg, var(--accent3), transparent); } .arad-gen-card.c-gold::before { background: linear-gradient(90deg, var(--gold), transparent); } .arad-gen-icon { font-size: 32px; margin-bottom: 20px; display: block; } .arad-gen-title { font-family: var(--font-head); font-weight: 700; font-size: 18px; color: var(--surface); margin-bottom: 10px; } .arad-gen-desc { font-size: 14px; color: var(--muted); line-height: 1.7; font-weight: 300; } .arad-gen-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; } .arad-gen-tag { font-family: var(--font-mono); font-size: 11px; padding: 4px 10px; border-radius: 4px; background: rgba(245,244,240,0.06); color: var(--muted); } /* ── DEPLOYMENT SAFETY ── */ .arad-safety { background: var(--ink2); border: 1px solid rgba(91,78,255,0.2); border-radius: 20px; padding: 64px; position: relative; overflow: hidden; } .arad-safety::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(0,201,167,0.07) 0%, transparent 60%); pointer-events: none; } .arad-safety-steps { display: flex; align-items: center; gap: 0; margin-top: 48px; flex-wrap: wrap; } .arad-ss { flex: 1; min-width: 120px; text-align: center; padding: 20px 12px; } .arad-ss-circle { width: 52px; height: 52px; border-radius: 50%; background: var(--ink3); border: 2px solid rgba(91,78,255,0.3); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-size: 20px; transition: border-color 0.2s, box-shadow 0.2s; } .arad-ss:hover .arad-ss-circle { border-color: var(--accent2); box-shadow: 0 0 20px rgba(0,201,167,0.3); } .arad-ss-label { font-family: var(--font-head); font-size: 13px; font-weight: 700; color: var(--surface); margin-bottom: 6px; } .arad-ss-desc { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .arad-ss-divider { flex: 0 0 auto; color: rgba(91,78,255,0.4); font-size: 20px; padding: 0 4px; align-self: flex-start; margin-top: 16px; } .arad-rollback { margin-top: 36px; display: flex; align-items: center; gap: 14px; padding: 16px 24px; background: rgba(255,91,91,0.07); border: 1px solid rgba(255,91,91,0.2); border-radius: 10px; font-family: var(--font-mono); font-size: 13px; color: #FF9898; } /* ── AGENTS ROW ── */ .arad-agents { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 48px; } .arad-agent-card { flex: 1; min-width: 140px; background: var(--ink2); border: 1px solid rgba(245,244,240,0.06); border-radius: 12px; padding: 24px 20px; text-align: center; transition: all 0.2s; cursor: default; } .arad-agent-card:hover { border-color: rgba(91,78,255,0.35); transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,0.3); } .arad-agent-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; font-family: var(--font-head); font-weight: 800; font-size: 16px; color: #fff; } .arad-agent-name { font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--surface); margin-bottom: 4px; } .arad-agent-by { font-family: var(--font-mono); font-size: 11px; color: var(--muted); } .arad-mcp-badge { margin-top: 10px; display: inline-block; font-family: var(--font-mono); font-size: 10px; padding: 3px 8px; border-radius: 4px; background: rgba(91,78,255,0.15); color: #9B93FF; border: 1px solid rgba(91,78,255,0.25); } /* ── PROBLEMS SOLVED ── */ .arad-problems { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .arad-problem { background: var(--ink2); border-radius: 12px; padding: 28px; border: 1px solid rgba(245,244,240,0.06); display: grid; grid-template-rows: auto 1fr auto; gap: 12px; transition: border-color 0.2s; } .arad-problem:hover { border-color: rgba(0,201,167,0.25); } .arad-problem-pain { font-family: var(--font-mono); font-size: 12px; color: var(--accent3); padding: 6px 12px; background: rgba(255,91,91,0.08); border-radius: 6px; border: 1px solid rgba(255,91,91,0.15); display: inline-flex; align-items: center; gap: 6px; width: fit-content; } .arad-problem-title { font-family: var(--font-head); font-weight: 700; font-size: 16px; color: var(--surface); line-height: 1.3; } .arad-problem-solution { font-family: var(--font-mono); font-size: 12px; color: var(--accent2); padding: 6px 12px; background: rgba(0,201,167,0.08); border-radius: 6px; border: 1px solid rgba(0,201,167,0.2); display: inline-flex; align-items: center; gap: 6px; width: fit-content; } /* ── CTA ── */ .arad-cta-section { text-align: center; padding: 120px 48px; position: relative; z-index: 1; } .arad-cta-inner { max-width: 720px; margin: 0 auto; background: var(--ink2); border: 1px solid rgba(91,78,255,0.25); border-radius: 24px; padding: 80px 64px; position: relative; overflow: hidden; } .arad-cta-inner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(91,78,255,0.15) 0%, transparent 70%); pointer-events: none; } .arad-cta-headline { font-family: var(--font-head); font-weight: 800; font-size: clamp(32px, 4vw, 48px); letter-spacing: -1.5px; color: var(--surface); margin-bottom: 20px; position: relative; z-index: 1; } .arad-cta-sub { font-size: 17px; font-weight: 300; color: var(--muted); line-height: 1.7; margin-bottom: 40px; position: relative; z-index: 1; } .arad-cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; } /* ── FOOTER ── */ .arad-footer { border-top: 1px solid rgba(245,244,240,0.06); padding: 48px; display: flex; align-items: center; justify-content: space-between; flex-wrap: gap; position: relative; z-index: 1; } .arad-footer-logo { font-family: var(--font-head); font-weight: 800; font-size: 18px; color: var(--surface); text-decoration: none; } .arad-footer-copy { font-family: var(--font-mono); font-size: 12px; color: var(--muted); } /* ── Animations ── */ @keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* ── Responsive ── */ @media (max-width: 768px) { .arad-nav { padding: 16px 20px; } .arad-nav-links { display: none; } .arad-section { padding: 80px 20px; } .arad-safety { padding: 36px 24px; } .arad-cta-inner { padding: 48px 28px; } .arad-footer { flex-direction: column; gap: 16px; text-align: center; } .arad-ss-divider { display: none; } .arad-steps { grid-template-columns: 1fr; } }

Automated Rapid Application Development

Reduce AI Token Burn

Let ARAD do the FAT part

AI agents connect directly to ARAD. Natural language becomes a live Liferay microservice, portlet, and workflow — no Git, no Jenkins, no pipeline, no downtime.

See how it works Request a demo

⚡ Zero pipeline

🔒 Auto rollback

♻️ OSGi hot-swap

🗄️ DB backup built-in

🤖 MCP native

How it works

From requirement to production in one shot

No DevOps. No waiting. ARAD handles the entire lifecycle inside Liferay.

01

💬

Describe

Developer describes the requirement in natural language to any AI agent — Claude, Codex, Cursor, or VS Code Copilot.

→

Let ARAD do the FAT part

AI agents connect directly to ARAD. Natural language becomes a live Liferay microservice, portlet, and workflow — no Git, no Jenkins, no pipeline, no downtime.