Project

General

Profile

General Tasks Tracker #29 » LTA_Aura_Reference.html

Joyel Xaviour, 05/13/2026 12:32 AM

 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Letters to Abroad — We help you actually arrive in Germany</title>
<meta name="description" content="Student-founded community helping you study and work in Germany. 500+ placed across 40+ universities. Transparent pricing, free tools, real people.">

<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=Instrument+Serif:ital,wght@0,400;1,400&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@500&display=swap" rel="stylesheet">

<style>
/* ============================================
DESIGN TOKENS — eyedropper-sampled from live LTA logo
============================================ */
:root {
--violet: #735DAA;
--violet-bright: #8C67EF;
--violet-deep: #5B3DC8;
--cream: #F4EEDF;
--paper: #FAF5E8;
--paper-warm: #F0E8D2;
--ink: #1F1B2E;
--ink-soft: #4C4655;
--dark: #15121F;
--mustard: #D4A748;
--terracotta: #D9573F;
--success: #0B6E2E;
--hairline: #C8BFAF;
--hairline-soft: #E0D7C4;
--shadow-subtle: 0 1px 2px rgba(31,27,46,.04), 0 8px 24px rgba(31,27,46,.04);
--radius-sm: 8px;
--radius: 14px;
--radius-lg: 24px;
--radius-xl: 40px;
}

/* ============================================
RESET
============================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
font-family: 'Inter Tight', system-ui, sans-serif;
background: var(--cream);
color: var(--ink);
line-height: 1.5;
font-size: 16px;
overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
a { color: inherit; text-decoration: none; }
input, select, textarea { font: inherit; color: inherit; }

/* ============================================
TYPOGRAPHY HELPERS
============================================ */
.serif { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; letter-spacing: -0.01em; }
.italic { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-weight: 400; color: var(--violet); }
.eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--violet);
display: inline-flex;
align-items: center;
gap: 10px;
}
.eyebrow::before {
content: '';
width: 24px;
height: 1px;
background: var(--violet);
display: inline-block;
}
h1, h2, h3 { font-family: 'Instrument Serif', Georgia, serif; font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; }
h1 { font-size: clamp(48px, 7vw, 84px); }
h2 { font-size: clamp(36px, 5vw, 64px); }
h3 { font-size: clamp(24px, 3vw, 32px); }

/* ============================================
LAYOUT
============================================ */
.container { max-width: 1320px; margin: 0 auto; padding: 0 32px; }
section { padding: 120px 0; position: relative; }
@media (max-width: 768px) {
section { padding: 72px 0; }
.container { padding: 0 20px; }
}

/* ============================================
BUTTONS
============================================ */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 22px;
border-radius: 12px;
font-weight: 500;
font-size: 14px;
letter-spacing: 0.01em;
transition: all 200ms cubic-bezier(.2,.8,.2,1);
white-space: nowrap;
}
.btn-primary {
background: var(--violet);
color: var(--paper);
}
.btn-primary:hover {
background: var(--violet-deep);
transform: translateY(-2px);
}
.btn-ghost {
border: 1px solid var(--ink);
color: var(--ink);
}
.btn-ghost:hover {
background: var(--ink);
color: var(--paper);
}
.btn-link {
color: var(--ink);
font-weight: 500;
font-size: 14px;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 200ms;
}
.btn-link:hover { color: var(--violet); gap: 12px; }
.btn-link::after { content: '→'; transition: transform 200ms; }

/* ============================================
HEADER — Sticky with mega menu
============================================ */
.header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(244, 238, 223, 0.92);
backdrop-filter: saturate(180%) blur(12px);
-webkit-backdrop-filter: saturate(180%) blur(12px);
border-bottom: 1px solid transparent;
transition: border-color 200ms;
}
.header.scrolled { border-bottom-color: var(--hairline); }
.nav {
height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
}
.logo {
font-family: 'Instrument Serif', serif;
font-size: 22px;
font-style: italic;
color: var(--ink);
letter-spacing: -0.01em;
}
.logo strong { font-style: normal; color: var(--violet); font-weight: 400; }
.nav-list {
display: flex;
list-style: none;
gap: 6px;
}
.nav-item { position: static; }
.nav-link {
font-size: 14px;
font-weight: 500;
padding: 10px 14px;
border-radius: 10px;
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--ink);
transition: background 150ms;
}
.nav-link:hover { background: rgba(31, 27, 46, 0.05); }
.nav-link.has-mega::after {
content: '';
width: 7px;
height: 7px;
border-right: 1.5px solid currentColor;
border-bottom: 1.5px solid currentColor;
transform: rotate(45deg);
margin-left: 4px;
margin-top: -3px;
opacity: 0.5;
transition: transform 200ms;
}
.nav-item:hover .nav-link.has-mega::after { transform: rotate(225deg); margin-top: 3px; }

/* Mega menu panels */
.mega {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--cream);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
box-shadow: 0 20px 40px -20px rgba(31, 27, 46, 0.15);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity 200ms, transform 200ms, visibility 200ms;
z-index: 99;
}
.nav-item:hover .mega { opacity: 1; visibility: visible; transform: translateY(0); }

.mega-grid {
max-width: 1320px;
margin: 0 auto;
padding: 36px 32px;
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 48px;
}
.mega-intro {
border-right: 1px solid var(--hairline-soft);
padding-right: 32px;
}
.mega-intro-title {
font-family: 'Instrument Serif', serif;
font-size: 28px;
line-height: 1.1;
margin-bottom: 8px;
}
.mega-intro p {
font-size: 13px;
color: var(--ink-soft);
margin-bottom: 20px;
line-height: 1.5;
}
.mega-featured {
background: var(--violet);
color: var(--paper);
padding: 18px;
border-radius: 12px;
display: block;
transition: transform 200ms;
}
.mega-featured:hover { transform: translateY(-2px); }
.mega-featured .tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--mustard);
margin-bottom: 6px;
}
.mega-featured-title { font-weight: 600; font-size: 15px; margin-bottom: 4px; }
.mega-featured-desc { font-size: 12px; opacity: 0.85; line-height: 1.4; }

.mega-col h4 {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 14px;
}
.mega-col ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.mega-col a {
font-size: 14px;
color: var(--ink);
display: flex;
align-items: baseline;
gap: 6px;
transition: color 150ms;
}
.mega-col a:hover { color: var(--violet); }
.mega-col .stub-tag {
font-size: 10px;
color: var(--ink-soft);
background: var(--hairline-soft);
padding: 2px 6px;
border-radius: 4px;
font-weight: 500;
}
.mega-col .ext::after { content: '↗'; font-size: 11px; opacity: 0.5; margin-left: 4px; }

.header-cta { display: flex; align-items: center; gap: 12px; }
.mobile-menu-btn { display: none; }

@media (max-width: 1100px) {
.nav-list { display: none; }
.mobile-menu-btn { display: flex; padding: 8px; }
}

/* ============================================
HERO
============================================ */
.hero {
padding: 100px 0 80px;
position: relative;
overflow: hidden;
}
.hero-grid {
display: grid;
grid-template-columns: 1.4fr 1fr;
gap: 80px;
align-items: end;
}
.hero-eyebrow { margin-bottom: 24px; }
.hero-headline {
font-size: clamp(54px, 8vw, 96px);
line-height: 1;
letter-spacing: -0.03em;
margin-bottom: 28px;
max-width: 880px;
}
.hero-sub {
font-size: 17px;
line-height: 1.55;
color: var(--ink-soft);
max-width: 540px;
margin-bottom: 36px;
}
.hero-ctas { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 28px; }
.hero-micro {
font-size: 13px;
color: var(--ink-soft);
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
}
.hero-micro .dot {
width: 4px;
height: 4px;
background: var(--violet);
border-radius: 50%;
display: inline-block;
}

/* Floating envelope illustration */
.hero-envelope {
position: relative;
height: 380px;
display: flex;
align-items: center;
justify-content: center;
}
.envelope-svg {
width: 100%;
max-width: 360px;
filter: drop-shadow(0 30px 50px rgba(91, 61, 200, 0.18));
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0) rotate(-2deg); }
50% { transform: translateY(-12px) rotate(-1deg); }
}

.hero-stats {
margin-top: 64px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
padding-top: 36px;
border-top: 1px solid var(--hairline);
}
.stat-num { font-family: 'Instrument Serif', serif; font-size: 56px; line-height: 1; }
.stat-num .italic { font-style: italic; color: var(--violet); }
.stat-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-top: 6px; }

@media (max-width: 900px) {
.hero-grid { grid-template-columns: 1fr; gap: 40px; }
.hero-envelope { height: 260px; }
.hero-stats { grid-template-columns: repeat(2, 1fr); gap: 24px; }
}

/* ============================================
ENQUIRY FORM SECTION
============================================ */
.enquiry {
padding: 100px 0;
background: linear-gradient(180deg, var(--cream) 0%, var(--paper-warm) 100%);
}
.enquiry-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 80px;
align-items: center;
}
.enquiry-intro h2 { margin-bottom: 20px; }
.enquiry-intro p { color: var(--ink-soft); font-size: 17px; line-height: 1.55; margin-bottom: 28px; max-width: 460px; }
.enquiry-bullets { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.enquiry-bullets li {
display: flex;
align-items: flex-start;
gap: 12px;
font-size: 14px;
color: var(--ink);
}
.enquiry-bullets li::before {
content: '';
width: 16px;
height: 16px;
flex-shrink: 0;
margin-top: 3px;
background: var(--violet);
mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8L7 12L13 4' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8L7 12L13 4' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}

.form-card {
background: var(--paper);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: 40px;
box-shadow: var(--shadow-subtle);
position: relative;
}
.form-progress {
display: flex;
gap: 4px;
margin-bottom: 32px;
}
.form-progress div {
flex: 1;
height: 3px;
background: var(--hairline);
border-radius: 2px;
transition: background 300ms;
}
.form-progress div.active { background: var(--violet); }
.form-step-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 8px;
display: block;
}
.form-step h3 { margin-bottom: 28px; }
.form-field { margin-bottom: 22px; position: relative; }
.form-field label {
display: block;
font-size: 12px;
font-weight: 500;
color: var(--ink-soft);
margin-bottom: 6px;
letter-spacing: 0.02em;
}
.form-field label .req { color: var(--terracotta); }
.form-field input,
.form-field select {
width: 100%;
background: transparent;
border: none;
border-bottom: 1px solid var(--hairline);
padding: 8px 0 10px;
font-size: 16px;
transition: border-color 200ms;
}
.form-field input:focus,
.form-field select:focus {
outline: none;
border-bottom-color: var(--violet);
}
.form-field select { appearance: none; background: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23735DAA' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 4px center; padding-right: 24px; }

.form-time-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 4px; }
.form-time-options label {
border: 1px solid var(--hairline);
border-radius: 10px;
padding: 12px 8px;
text-align: center;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 200ms;
color: var(--ink);
margin: 0;
}
.form-time-options input { display: none; }
.form-time-options input:checked + label,
.form-time-options label:hover { border-color: var(--violet); background: rgba(115, 93, 170, 0.06); color: var(--violet); }
.form-time-options strong { display: block; font-size: 11px; font-family: 'JetBrains Mono', monospace; letter-spacing: 0.1em; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--hairline-soft);
}
.form-back {
font-size: 13px;
color: var(--ink-soft);
display: inline-flex;
align-items: center;
gap: 4px;
}
.form-back:hover { color: var(--ink); }
.form-trust { font-size: 12px; color: var(--ink-soft); margin-top: 16px; text-align: center; }
.form-step { display: none; }
.form-step.active { display: block; }

@media (max-width: 900px) {
.enquiry-grid { grid-template-columns: 1fr; gap: 40px; }
.form-card { padding: 28px; }
.form-row { grid-template-columns: 1fr; }
}

/* ============================================
UNIVERSITY MARQUEE
============================================ */
.marquee {
padding: 60px 0;
background: var(--paper);
border-top: 1px solid var(--hairline);
border-bottom: 1px solid var(--hairline);
overflow: hidden;
position: relative;
}
.marquee-label {
text-align: center;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
margin-bottom: 32px;
}
.marquee-track {
display: flex;
gap: 64px;
animation: marquee 40s linear infinite;
width: max-content;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
font-family: 'Instrument Serif', serif;
font-size: 22px;
color: var(--ink-soft);
white-space: nowrap;
opacity: 0.7;
}
@keyframes marquee {
to { transform: translateX(-50%); }
}
.marquee::before, .marquee::after {
content: '';
position: absolute;
top: 0; bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--paper), transparent); }
.marquee::after { right: 0; background: linear-gradient(-90deg, var(--paper), transparent); }

/* ============================================
AWARDS STRIP
============================================ */
.awards-strip {
padding: 60px 0;
}
.awards-strip-inner {
display: grid;
grid-template-columns: auto repeat(4, 1fr);
gap: 48px;
align-items: center;
}
.awards-label {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
line-height: 1.4;
max-width: 140px;
}
.award {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
line-height: 1.3;
}
.award-icon {
width: 36px;
height: 36px;
background: var(--mustard);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: var(--ink);
font-family: 'Instrument Serif', serif;
font-size: 18px;
}
.award strong { display: block; font-weight: 600; }
.award span { color: var(--ink-soft); font-size: 12px; }
@media (max-width: 900px) {
.awards-strip-inner { grid-template-columns: 1fr 1fr; gap: 24px; }
.awards-label { grid-column: 1 / -1; }
}

/* ============================================
DARK CONTRAST — WHAT IS LTA
============================================ */
.dark-section {
background: var(--dark);
color: var(--cream);
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
margin: 0 -32px;
padding: 140px 32px;
position: relative;
overflow: hidden;
}
.dark-section::before {
content: '';
position: absolute;
top: -100px;
right: -100px;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(140, 103, 239, 0.18), transparent 70%);
pointer-events: none;
}
.dark-section .eyebrow { color: var(--violet-bright); }
.dark-section .eyebrow::before { background: var(--violet-bright); }
.dark-inner { max-width: 1320px; margin: 0 auto; }
.dark-headline {
font-size: clamp(40px, 5vw, 64px);
margin: 24px 0 64px;
max-width: 860px;
color: var(--cream);
}
.dark-three {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 48px;
}
.dark-three-item {
border-top: 1px solid rgba(244, 238, 223, 0.15);
padding-top: 24px;
}
.dark-three-item h4 {
font-family: 'Instrument Serif', serif;
font-size: 26px;
line-height: 1.15;
margin-bottom: 12px;
color: var(--cream);
}
.dark-three-item p { font-size: 14px; color: rgba(244, 238, 223, 0.7); line-height: 1.55; }

.founder-card {
margin-top: 80px;
padding-top: 60px;
border-top: 1px solid rgba(244, 238, 223, 0.15);
display: grid;
grid-template-columns: auto 1fr;
gap: 32px;
align-items: center;
}
.founder-avatar {
width: 110px;
height: 110px;
border-radius: 50%;
background: var(--violet-bright);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Instrument Serif', serif;
font-size: 44px;
color: var(--paper);
flex-shrink: 0;
border: 2px solid rgba(244, 238, 223, 0.2);
}
.founder-quote {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-size: 22px;
line-height: 1.4;
color: var(--cream);
margin-bottom: 12px;
}
.founder-name { font-size: 13px; color: rgba(244, 238, 223, 0.7); }
.founder-name strong { color: var(--cream); font-weight: 600; }
@media (max-width: 900px) {
.dark-section { margin: 0 -20px; padding: 100px 20px; }
.dark-three { grid-template-columns: 1fr; gap: 32px; }
.founder-card { grid-template-columns: 1fr; text-align: left; }
}

/* ============================================
HOW IT WORKS
============================================ */
.how-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: 64px;
}
.how-step {
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: 32px;
background: var(--paper);
transition: all 200ms;
position: relative;
}
.how-step:hover {
transform: translateY(-4px);
border-color: var(--violet);
}
.how-num {
font-family: 'Instrument Serif', serif;
font-size: 48px;
color: var(--violet);
line-height: 1;
margin-bottom: 24px;
}
.how-step h4 {
font-family: 'Instrument Serif', serif;
font-size: 22px;
margin-bottom: 12px;
line-height: 1.2;
}
.how-step p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin-bottom: 16px; }
.how-step a { font-size: 12px; color: var(--violet); font-weight: 500; }
@media (max-width: 900px) {
.how-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
.how-step { padding: 24px; }
}
@media (max-width: 600px) {
.how-grid { grid-template-columns: 1fr; }
}

/* ============================================
SERVICES PREVIEW
============================================ */
.section-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 24px;
margin-bottom: 56px;
}
.section-head-text { max-width: 700px; }
.section-head h2 { margin: 16px 0 0; }
.section-head p { font-size: 17px; color: var(--ink-soft); margin-top: 18px; line-height: 1.55; }

.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--hairline);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
overflow: hidden;
}
.service-card {
background: var(--paper);
padding: 36px;
transition: background 200ms;
cursor: pointer;
display: flex;
flex-direction: column;
}
.service-card:hover { background: var(--paper-warm); }
.service-icon {
width: 44px;
height: 44px;
background: rgba(115, 93, 170, 0.1);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 24px;
color: var(--violet);
}
.service-card h3 {
font-size: 24px;
margin-bottom: 10px;
}
.service-card p {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.55;
margin-bottom: 16px;
flex-grow: 1;
}
.service-price {
font-size: 12px;
color: var(--ink-soft);
margin-bottom: 14px;
}
.service-price strong { font-family: 'Instrument Serif', serif; font-size: 18px; color: var(--ink); }
.service-card .btn-link { font-size: 13px; }
@media (max-width: 900px) {
.services-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.services-grid { grid-template-columns: 1fr; }
}

/* ============================================
PRODUCTS
============================================ */
.products-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
margin-top: 56px;
}
.product-card {
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: 44px;
background: var(--paper);
position: relative;
overflow: hidden;
transition: all 300ms;
}
.product-card:hover {
transform: translateY(-4px);
box-shadow: 0 24px 48px -16px rgba(31, 27, 46, 0.1);
border-color: var(--violet);
}
.product-card.featured {
background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
color: var(--paper);
}
.product-card.featured::after {
content: '';
position: absolute;
top: -60%;
right: -20%;
width: 60%;
height: 200%;
background: radial-gradient(ellipse, rgba(255,255,255,0.08), transparent 70%);
pointer-events: none;
transform: rotate(20deg);
}
.product-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 8px;
border-radius: 4px;
display: inline-block;
margin-bottom: 20px;
}
.product-tag.live { background: rgba(11, 110, 46, 0.12); color: var(--success); }
.product-tag.beta { background: rgba(212, 167, 72, 0.18); color: #8B6D00; }
.product-tag.new { background: rgba(140, 103, 239, 0.18); color: var(--violet); }
.product-card.featured .product-tag.new { background: rgba(255,255,255,0.18); color: var(--mustard); }

.product-card h3 {
font-size: 36px;
margin-bottom: 14px;
}
.product-card p {
font-size: 15px;
line-height: 1.55;
margin-bottom: 28px;
max-width: 480px;
color: var(--ink-soft);
}
.product-card.featured p { color: rgba(244, 238, 223, 0.85); }
.product-cta {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 18px;
border-radius: 10px;
font-size: 13px;
font-weight: 500;
background: var(--ink);
color: var(--paper);
transition: all 200ms;
}
.product-cta:hover { background: var(--violet-deep); transform: translateX(4px); }
.product-card.featured .product-cta {
background: var(--paper);
color: var(--violet-deep);
}
.product-card.featured .product-cta:hover { background: var(--cream); }
.product-ext-icon { font-size: 14px; opacity: 0.7; margin-left: 2px; }
@media (max-width: 900px) {
.products-grid { grid-template-columns: 1fr; }
.product-card { padding: 32px; }
.product-card h3 { font-size: 28px; }
}

/* ============================================
TOOLS
============================================ */
.tools-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 56px;
}
.tool-card {
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: 28px;
background: var(--paper);
transition: all 200ms;
display: flex;
flex-direction: column;
min-height: 220px;
}
.tool-card:hover {
border-color: var(--violet);
background: var(--cream);
}
.tool-icon {
width: 32px;
height: 32px;
color: var(--violet);
margin-bottom: 20px;
}
.tool-card h4 {
font-family: 'Instrument Serif', serif;
font-size: 22px;
margin-bottom: 8px;
line-height: 1.2;
}
.tool-card p {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
margin-bottom: 16px;
flex-grow: 1;
}
.tool-card .btn-link { font-size: 12px; }
@media (max-width: 900px) {
.tools-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.tools-grid { grid-template-columns: 1fr; }
}

/* ============================================
STUDY TRACKS — 5 countries
============================================ */
.country-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
gap: 20px;
margin-top: 56px;
}
.country-card {
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: 32px;
background: var(--paper);
transition: all 200ms;
display: flex;
flex-direction: column;
position: relative;
overflow: hidden;
}
.country-card.primary {
background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
color: var(--paper);
}
.country-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-subtle);
}
.country-flag {
font-size: 36px;
margin-bottom: 20px;
line-height: 1;
}
.country-card h4 {
font-family: 'Instrument Serif', serif;
font-size: 28px;
margin-bottom: 6px;
line-height: 1.1;
}
.country-card.primary h4 { font-size: 32px; }
.country-card p {
font-size: 13px;
color: var(--ink-soft);
line-height: 1.5;
margin-bottom: 16px;
flex-grow: 1;
}
.country-card.primary p { color: rgba(244, 238, 223, 0.85); }
.country-status {
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink-soft);
margin-top: auto;
}
.country-card.primary .country-status { color: var(--mustard); }
.country-card .btn-link { font-size: 12px; margin-top: 8px; }
.country-card.primary .btn-link { color: var(--paper); }
.country-card.primary .btn-link:hover { color: var(--mustard); }
@media (max-width: 1100px) {
.country-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.country-grid { grid-template-columns: 1fr; }
}

/* ============================================
ALPHA BOOTCAMP
============================================ */
.alpha {
background: var(--paper-warm);
padding: 100px 32px;
margin: 0 -32px;
border-radius: var(--radius-xl);
}
.alpha-inner { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: center; }
.alpha-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mustard);
background: rgba(212, 167, 72, 0.15);
padding: 6px 12px;
border-radius: 20px;
display: inline-block;
margin-bottom: 24px;
}
.alpha h2 { margin-bottom: 24px; }
.alpha p { font-size: 16px; color: var(--ink-soft); line-height: 1.6; margin-bottom: 28px; }
.alpha-features { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 32px; }
.alpha-features li {
font-size: 14px;
padding-left: 24px;
position: relative;
line-height: 1.4;
}
.alpha-features li::before {
content: '';
position: absolute;
left: 0;
top: 6px;
width: 14px;
height: 14px;
background: var(--mustard);
border-radius: 50%;
}
.alpha-visual {
position: relative;
height: 380px;
border-radius: var(--radius-lg);
background: linear-gradient(135deg, var(--violet-deep), var(--violet));
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.alpha-visual::before {
content: '';
position: absolute;
inset: -40%;
background: radial-gradient(circle at 30% 30%, rgba(212, 167, 72, 0.25), transparent 50%);
}
.alpha-visual-big {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-size: 110px;
color: var(--cream);
letter-spacing: -0.04em;
z-index: 1;
}
.alpha-visual-small {
position: absolute;
bottom: 32px;
left: 32px;
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--mustard);
}
@media (max-width: 900px) {
.alpha { padding: 72px 20px; margin: 0 -20px; }
.alpha-inner { grid-template-columns: 1fr; gap: 40px; }
.alpha-features { grid-template-columns: 1fr; }
}

/* ============================================
TESTIMONIALS MARQUEE
============================================ */
.testimonials { background: var(--cream); padding: 100px 0; overflow: hidden; }
.testimonials-track {
display: flex;
gap: 24px;
animation: marquee 60s linear infinite;
width: max-content;
margin-top: 56px;
}
.testimonials-track:hover { animation-play-state: paused; }
.testimonial-card {
flex-shrink: 0;
width: 380px;
background: var(--paper);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: 32px;
}
.testimonial-card .quote {
font-family: 'Instrument Serif', serif;
font-style: italic;
font-size: 19px;
line-height: 1.4;
margin-bottom: 24px;
color: var(--ink);
}
.testimonial-meta { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--hairline-soft); }
.testimonial-avatar {
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--violet);
color: var(--paper);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Instrument Serif', serif;
font-size: 18px;
flex-shrink: 0;
}
.testimonial-name { font-size: 14px; font-weight: 600; }
.testimonial-uni { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* ============================================
PRICING
============================================ */
.pricing { padding: 100px 0; }
.community-banner {
background: linear-gradient(90deg, var(--cream), var(--paper-warm), var(--cream));
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: 28px 40px;
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 56px;
gap: 24px;
flex-wrap: wrap;
}
.community-banner-left { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.community-tag {
background: var(--success);
color: var(--paper);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 5px 10px;
border-radius: 4px;
}
.community-banner h4 { font-family: 'Instrument Serif', serif; font-size: 28px; line-height: 1.1; }
.community-banner p { font-size: 13px; color: var(--ink-soft); margin-top: 2px; }

.pricing-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 24px;
}
.price-card {
background: var(--paper);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: 40px;
position: relative;
display: flex;
flex-direction: column;
}
.price-card.featured {
background: linear-gradient(180deg, var(--violet) 0%, var(--violet-deep) 100%);
color: var(--paper);
border: none;
box-shadow: 0 24px 48px -16px rgba(91, 61, 200, 0.3);
transform: translateY(-12px);
}
.featured-badge {
position: absolute;
top: -14px;
right: 24px;
background: var(--mustard);
color: var(--ink);
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 4px;
font-weight: 600;
}
.price-name {
font-family: 'Instrument Serif', serif;
font-size: 32px;
margin-bottom: 8px;
}
.price-blurb { font-size: 13px; opacity: 0.7; margin-bottom: 24px; }
.price-amount {
font-family: 'Instrument Serif', serif;
font-size: 56px;
line-height: 1;
margin-bottom: 8px;
}
.price-amount .currency { font-size: 32px; vertical-align: top; opacity: 0.7; }
.price-fees { font-size: 11px; opacity: 0.6; margin-bottom: 28px; padding-bottom: 20px; border-bottom: 1px solid var(--hairline-soft); }
.price-card.featured .price-fees { border-bottom-color: rgba(244, 238, 223, 0.2); }
.price-features { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-bottom: 32px; flex-grow: 1; }
.price-features li { font-size: 13px; padding-left: 22px; position: relative; line-height: 1.4; }
.price-features li::before {
content: '';
position: absolute;
left: 0; top: 5px;
width: 14px; height: 14px;
background: currentColor;
opacity: 0.7;
mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8L7 12L13 4' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 8L7 12L13 4' stroke='black' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
}
.price-cta {
padding: 14px 18px;
border-radius: 10px;
text-align: center;
font-weight: 500;
font-size: 14px;
transition: all 200ms;
background: var(--ink);
color: var(--paper);
}
.price-card.featured .price-cta {
background: var(--paper);
color: var(--violet-deep);
}
.price-cta:hover { transform: translateY(-2px); }
@media (max-width: 900px) {
.pricing-grid { grid-template-columns: 1fr; }
.price-card.featured { transform: none; }
}

/* ============================================
VISA OPTIONS
============================================ */
.visa-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
margin-top: 56px;
}
.visa-card {
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: 28px;
background: var(--paper);
transition: all 200ms;
}
.visa-card:hover { border-color: var(--violet); transform: translateY(-2px); }
.visa-num {
font-family: 'JetBrains Mono', monospace;
font-size: 11px;
letter-spacing: 0.14em;
color: var(--violet);
margin-bottom: 14px;
}
.visa-card h4 { font-family: 'Instrument Serif', serif; font-size: 24px; margin-bottom: 10px; line-height: 1.15; }
.visa-card p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 14px; }
.visa-card .visa-fee { font-size: 12px; color: var(--ink); margin-bottom: 12px; }
.visa-card .visa-fee strong { font-family: 'Instrument Serif', serif; font-size: 16px; }
@media (max-width: 900px) { .visa-grid { grid-template-columns: 1fr; } }

/* ============================================
SCAM ALERTS — CLICKABLE
============================================ */
.scam-alerts {
background: linear-gradient(180deg, var(--cream), var(--paper-warm));
padding: 100px 0;
}
.scam-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 56px;
}
.scam-card {
background: var(--paper);
border: 1px solid var(--hairline);
border-radius: var(--radius);
padding: 32px;
border-left: 4px solid var(--terracotta);
transition: all 200ms;
display: block;
cursor: pointer;
}
.scam-card:hover {
transform: translateX(4px);
box-shadow: var(--shadow-subtle);
border-color: var(--terracotta);
border-left-color: var(--terracotta);
}
.scam-meta {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 14px;
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.scam-tag {
background: var(--terracotta);
color: var(--paper);
padding: 4px 8px;
border-radius: 4px;
}
.scam-tag.resolved { background: var(--success); }
.scam-card h4 { font-family: 'Instrument Serif', serif; font-size: 26px; line-height: 1.15; margin-bottom: 12px; }
.scam-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; margin-bottom: 16px; }
.scam-stats { display: flex; gap: 24px; font-size: 12px; color: var(--ink-soft); margin-bottom: 16px; padding-top: 16px; border-top: 1px solid var(--hairline-soft); }
.scam-stats strong { font-family: 'Instrument Serif', serif; font-size: 18px; color: var(--ink); display: block; }
.scam-read-link {
font-size: 13px;
color: var(--terracotta);
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
transition: gap 200ms;
}
.scam-card:hover .scam-read-link { gap: 12px; }

.scam-submit-band {
margin-top: 40px;
background: var(--ink);
color: var(--cream);
padding: 36px;
border-radius: var(--radius-lg);
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.scam-submit-band h4 { font-family: 'Instrument Serif', serif; font-size: 26px; margin-bottom: 6px; color: var(--cream); }
.scam-submit-band p { font-size: 13px; color: rgba(244, 238, 223, 0.7); max-width: 480px; }
.scam-submit-band .btn { background: var(--terracotta); color: var(--paper); }
.scam-submit-band .btn:hover { background: var(--paper); color: var(--terracotta); }
@media (max-width: 900px) { .scam-grid { grid-template-columns: 1fr; } }

/* ============================================
LEGAL AID — INDIA MAP
============================================ */
.legal-aid { background: var(--paper); padding: 100px 0; }
.legal-aid-grid {
display: grid;
grid-template-columns: 1fr 1.1fr;
gap: 64px;
align-items: center;
margin-top: 56px;
}
.india-map {
position: relative;
background: var(--cream);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: 32px;
aspect-ratio: 1 / 1;
display: flex;
align-items: center;
justify-content: center;
}
.india-map svg { width: 100%; height: 100%; }
.india-path {
fill: rgba(115, 93, 170, 0.1);
stroke: var(--violet);
stroke-width: 1.2;
stroke-linejoin: round;
}
.city-pin {
fill: var(--terracotta);
cursor: pointer;
}
.city-pin-pulse {
fill: var(--terracotta);
opacity: 0.3;
animation: pulse 2s ease-in-out infinite;
transform-origin: center;
transform-box: fill-box;
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.3; }
50% { transform: scale(2.5); opacity: 0; }
}
.map-legend {
position: absolute;
bottom: 24px;
left: 24px;
font-family: 'JetBrains Mono', monospace;
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--ink-soft);
display: flex;
align-items: center;
gap: 8px;
}
.map-legend::before {
content: '';
width: 6px;
height: 6px;
background: var(--terracotta);
border-radius: 50%;
}

.legal-cities {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.legal-city {
font-size: 13px;
padding: 14px;
background: var(--paper-warm);
border-radius: 8px;
border-left: 2px solid var(--violet);
transition: background 200ms;
cursor: pointer;
}
.legal-city:hover { background: var(--cream); }
.legal-city strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.legal-city span { color: var(--ink-soft); font-size: 11px; }
.legal-aid-micro {
margin-top: 24px;
font-size: 13px;
color: var(--ink-soft);
font-style: italic;
}
@media (max-width: 900px) {
.legal-aid-grid { grid-template-columns: 1fr; gap: 40px; }
.legal-cities { grid-template-columns: 1fr; }
}

/* ============================================
BLOG PREVIEW
============================================ */
.blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
}
.blog-card {
display: flex;
flex-direction: column;
gap: 16px;
}
.blog-cover {
aspect-ratio: 16 / 10;
border-radius: var(--radius);
background: linear-gradient(135deg, var(--violet), var(--violet-deep));
position: relative;
overflow: hidden;
}
.blog-cover.cover-2 { background: linear-gradient(135deg, var(--mustard), var(--terracotta)); }
.blog-cover.cover-3 { background: linear-gradient(135deg, var(--ink), var(--violet-deep)); }
.blog-cover::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.1), transparent 50%);
}
.blog-cover-text {
position: absolute;
bottom: 24px;
left: 24px;
right: 24px;
font-family: 'Instrument Serif', serif;
font-style: italic;
font-size: 32px;
color: var(--paper);
line-height: 1.1;
z-index: 1;
}
.blog-meta { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); }
.blog-card h4 { font-family: 'Instrument Serif', serif; font-size: 22px; line-height: 1.2; }
.blog-card p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 900px) { .blog-grid { grid-template-columns: 1fr; } }

/* ============================================
TEAM
============================================ */
.team-section { padding: 120px 0; }
.team-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
gap: 24px;
margin-top: 64px;
align-items: stretch;
}
.team-card-founder {
background: linear-gradient(135deg, var(--violet) 0%, var(--violet-deep) 100%);
color: var(--paper);
border-radius: var(--radius-lg);
padding: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
}
.team-card-founder::before {
content: '';
position: absolute;
top: -50%;
right: -30%;
width: 80%;
height: 200%;
background: radial-gradient(ellipse, rgba(244, 238, 223, 0.08), transparent 60%);
}
.team-card-founder .team-tag {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mustard);
margin-bottom: 20px;
}
.team-portrait {
width: 100px;
height: 100px;
border-radius: 50%;
background: var(--mustard);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Instrument Serif', serif;
font-size: 42px;
color: var(--ink);
margin-bottom: 24px;
position: relative;
}
.team-portrait::after {
content: 'PLACEHOLDER';
position: absolute;
bottom: -18px;
left: 50%;
transform: translateX(-50%);
font-family: 'JetBrains Mono', monospace;
font-size: 8px;
letter-spacing: 0.1em;
color: var(--ink-soft);
background: var(--paper);
padding: 1px 6px;
border-radius: 3px;
border: 1px solid var(--hairline);
white-space: nowrap;
}
.team-card-founder .team-portrait { background: var(--mustard); }
.team-card-founder .team-portrait::after { display: none; }
.team-card-founder h3 { font-size: 32px; color: var(--paper); margin-bottom: 8px; }
.team-role { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 14px; }
.team-card-founder .team-role { color: var(--mustard); }
.team-card-founder .team-quote { font-family: 'Instrument Serif', serif; font-style: italic; font-size: 17px; line-height: 1.4; color: rgba(244, 238, 223, 0.9); margin-bottom: 16px; }
.team-card-founder .team-bio { font-size: 12px; color: rgba(244, 238, 223, 0.7); line-height: 1.5; }

.team-card {
background: var(--paper);
border: 1px solid var(--hairline);
border-radius: var(--radius-lg);
padding: 28px;
display: flex;
flex-direction: column;
transition: all 200ms;
}
.team-card:hover { transform: translateY(-4px); border-color: var(--violet); }
.team-card .team-portrait {
width: 64px;
height: 64px;
font-size: 28px;
background: var(--hairline-soft);
color: var(--ink);
margin-bottom: 20px;
}
.team-card h4 { font-family: 'Instrument Serif', serif; font-size: 22px; margin-bottom: 4px; line-height: 1.15; }
.team-card .team-bio { font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin-top: 12px; }
@media (max-width: 1100px) {
.team-grid { grid-template-columns: 1fr 1fr; }
.team-card-founder { grid-column: 1 / -1; }
}
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }

/* ============================================
FINAL CTA
============================================ */
.final-cta {
background: var(--ink);
color: var(--cream);
border-radius: var(--radius-xl);
margin: 0 32px;
padding: 100px 80px;
text-align: center;
position: relative;
overflow: hidden;
}
.final-cta::before {
content: '';
position: absolute;
top: -50%;
left: 30%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(140, 103, 239, 0.2), transparent 60%);
}
.final-cta h2 { font-size: clamp(48px, 6vw, 80px); color: var(--cream); margin-bottom: 24px; position: relative; }
.final-cta h2 .italic { color: var(--violet-bright); }
.final-cta p { font-size: 17px; color: rgba(244, 238, 223, 0.7); max-width: 540px; margin: 0 auto 36px; position: relative; }
.final-cta .btn-primary { background: var(--paper); color: var(--ink); position: relative; }
.final-cta .btn-primary:hover { background: var(--violet-bright); color: var(--paper); }
@media (max-width: 900px) {
.final-cta { margin: 0 20px; padding: 72px 32px; }
}

/* ============================================
FOOTER
============================================ */
.footer {
background: var(--dark);
color: var(--cream);
padding: 80px 0 32px;
}
.footer-top {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
gap: 48px;
margin-bottom: 60px;
}
.footer-brand .logo { color: var(--cream); font-size: 28px; }
.footer-brand p { font-size: 14px; color: rgba(244, 238, 223, 0.5); margin-top: 16px; line-height: 1.55; max-width: 280px; }
.footer-col h5 {
font-family: 'JetBrains Mono', monospace;
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--mustard);
margin-bottom: 20px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { font-size: 13px; color: rgba(244, 238, 223, 0.6); transition: color 150ms; }
.footer-col a:hover { color: var(--cream); }
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 32px;
border-top: 1px solid rgba(244, 238, 223, 0.15);
font-size: 12px;
color: rgba(244, 238, 223, 0.5);
flex-wrap: wrap;
gap: 16px;
}
.footer-social { display: flex; gap: 16px; }
.footer-social a:hover { color: var(--cream); }
.footer-legal { display: flex; gap: 16px; }
@media (max-width: 1100px) {
.footer-top { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 600px) {
.footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ============================================
UTILITIES
============================================ */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 600ms, transform 600ms; }
.reveal.in { opacity: 1; transform: translateY(0); }
</style>
</head>
<body>

<!-- ============================================
HEADER + MEGA MENU
============================================ -->
<header class="header" id="header">
<div class="container nav">
<a href="/" class="logo">Letters to <strong><em>Abroad</em></strong></a>

<nav>
<ul class="nav-list">
<li class="nav-item">
<a href="/study" class="nav-link has-mega">Study</a>
<div class="mega">
<div class="mega-grid">
<div class="mega-intro">
<div class="mega-intro-title">Study <em class="italic">abroad</em>.</div>
<p>From shortlist to seat. We've placed 500+ students across 40+ universities.</p>
<a href="/products/course-shortlisting" class="mega-featured">
<div class="tag">Featured</div>
<div class="mega-featured-title">Course Shortlisting Tool</div>
<div class="mega-featured-desc">Find universities that fit your profile, with admit %.</div>
</a>
</div>
<div class="mega-col">
<h4>By Country</h4>
<ul>
<li><a href="/study/germany">🇩🇪 Germany</a></li>
<li><a href="/study/austria">🇦🇹 Austria <span class="stub-tag">Soon</span></a></li>
<li><a href="/study/spain">🇪🇸 Spain <span class="stub-tag">Soon</span></a></li>
<li><a href="/study/netherlands">🇳🇱 Netherlands <span class="stub-tag">Soon</span></a></li>
<li><a href="/study/italy">🇮🇹 Italy <span class="stub-tag">Soon</span></a></li>
</ul>
</div>
<div class="mega-col">
<h4>By Degree</h4>
<ul>
<li><a href="/study/germany/masters">Master's in Germany</a></li>
<li><a href="/study/germany/bachelors">Bachelor's in Germany</a></li>
<li><a href="/study/germany/phd">PhD in Germany</a></li>
</ul>
</div>
<div class="mega-col">
<h4>Resources</h4>
<ul>
<li><a href="/study/germany/universities">Find universities</a></li>
<li><a href="/study/germany/programs">Browse programs</a></li>
<li><a href="/resources/scholarships">Scholarships</a></li>
<li><a href="/study/germany/timeline">Application timeline</a></li>
<li><a href="/tools/cost-of-living">Cost of studying</a></li>
</ul>
</div>
</div>
</div>
</li>

<li class="nav-item">
<a href="/train-and-work" class="nav-link has-mega">Train & Work</a>
<div class="mega">
<div class="mega-grid">
<div class="mega-intro">
<div class="mega-intro-title">Train & <em class="italic">work</em>.</div>
<p>Ausbildung, full-time jobs, and Blue Card paths — placed and supported.</p>
<a href="https://project004.letterstoabroad.com" target="_blank" rel="noopener" class="mega-featured">
<div class="tag">External · Open Beta</div>
<div class="mega-featured-title">Project004 →</div>
<div class="mega-featured-desc">Your jobs and ausbildung platform.</div>
</a>
</div>
<div class="mega-col">
<h4>Pathways</h4>
<ul>
<li><a href="/train-and-work/ausbildung">Ausbildung guide</a></li>
<li><a href="https://project004.letterstoabroad.com" class="ext">Full-time jobs</a></li>
<li><a href="/train-and-work/nurse-recruitment">Nurse recruitment</a></li>
<li><a href="/live/freelance-visa">Freelance & self-employed</a></li>
</ul>
</div>
<div class="mega-col">
<h4>Visas</h4>
<ul>
<li><a href="/live/blue-card">EU Blue Card</a></li>
<li><a href="/live/job-seeker-visa">Job Seeker Visa</a></li>
<li><a href="/live/work-visa">Work Visa §18</a></li>
<li><a href="/live/freelance-visa">Freelance Visa</a></li>
</ul>
</div>
<div class="mega-col">
<h4>Tools</h4>
<ul>
<li><a href="/tools/blue-card-eligibility">Blue Card eligibility</a></li>
<li><a href="/tools/net-salary-calculator">Net Salary calculator</a></li>
<li><a href="/tools/german-grade-calculator">Grade calculator</a></li>
</ul>
</div>
</div>
</div>
</li>

<li class="nav-item">
<a href="/live" class="nav-link has-mega">Live in Germany</a>
<div class="mega">
<div class="mega-grid">
<div class="mega-intro">
<div class="mega-intro-title">Live in <em class="italic">Germany</em>.</div>
<p>The unsexy stuff that wrecks first months. We handle it.</p>
<a href="/services/supernova" class="mega-featured">
<div class="tag">Recommended</div>
<div class="mega-featured-title">Supernova package</div>
<div class="mega-featured-desc">45-day post-arrival concierge included.</div>
</a>
</div>
<div class="mega-col">
<h4>Visas</h4>
<ul>
<li><a href="/live/visa-types">All visa types</a></li>
<li><a href="/live/student-visa">Student visa</a></li>
<li><a href="/live/job-seeker-visa">Job seeker visa</a></li>
<li><a href="/live/blue-card">Blue Card</a></li>
<li><a href="/live/family-reunion-visa">Family reunion</a></li>
<li><a href="/live/freelance-visa">Freelance</a></li>
</ul>
</div>
<div class="mega-col">
<h4>Setup</h4>
<ul>
<li><a href="/live/blocked-account">Blocked account</a></li>
<li><a href="/live/health-insurance">Health insurance</a></li>
<li><a href="/live/anmeldung">Anmeldung</a></li>
<li><a href="/live/housing">Housing guide</a></li>
</ul>
</div>
<div class="mega-col">
<h4>Money & Life</h4>
<ul>
<li><a href="/tools/cost-of-living">Cost of living</a></li>
<li><a href="/tools/net-salary-calculator">Net salary</a></li>
<li><a href="/live/tax-classes">Tax classes</a></li>
<li><a href="/live/deutschland-ticket">Deutschland Ticket</a></li>
</ul>
</div>
</div>
</div>
</li>

<li class="nav-item">
<a href="/products" class="nav-link has-mega">Products</a>
<div class="mega">
<div class="mega-grid">
<div class="mega-intro">
<div class="mega-intro-title">Our <em class="italic">products</em>.</div>
<p>Four products. Each one because nothing on the market did the job.</p>
<a href="https://project004.letterstoabroad.com" target="_blank" rel="noopener" class="mega-featured">
<div class="tag">New · Open beta</div>
<div class="mega-featured-title">Project004 →</div>
<div class="mega-featured-desc">Candidate platform for jobs and ausbildung.</div>
</a>
</div>
<div class="mega-col">
<h4>Built in-site</h4>
<ul>
<li><a href="/products/zenna"><strong>✦ LTA Zenna</strong></a></li>
<li style="font-size: 12px; color: var(--ink-soft); margin-top: -8px;">AI SOP & document copilot</li>
<li style="margin-top: 8px;"><a href="/products/course-shortlisting"><strong>◈ Course Shortlisting</strong></a></li>
<li style="font-size: 12px; color: var(--ink-soft); margin-top: -8px;">Profile-in, ranked unis out</li>
</ul>
</div>
<div class="mega-col">
<h4>External</h4>
<ul>
<li><a href="https://connect.letterstoabroad.com" class="ext"><strong>⇢ LTA Connect</strong></a></li>
<li style="font-size: 12px; color: var(--ink-soft); margin-top: -8px;">1-on-1 mentor calls</li>
<li style="margin-top: 8px;"><a href="https://project004.letterstoabroad.com" class="ext"><strong>▲ Project004</strong></a></li>
<li style="font-size: 12px; color: var(--ink-soft); margin-top: -8px;">Jobs & ausbildung</li>
</ul>
</div>
<div class="mega-col">
<h4>Compare</h4>
<ul>
<li><a href="/products">All products overview</a></li>
<li><a href="/services/packages">In which package?</a></li>
</ul>
</div>
</div>
</div>
</li>

<li class="nav-item">
<a href="/tools" class="nav-link has-mega">Tools</a>
<div class="mega">
<div class="mega-grid">
<div class="mega-intro">
<div class="mega-intro-title">Free <em class="italic">tools</em>.</div>
<p>Use them without signing up. Always free.</p>
<a href="/tools/german-grade-calculator" class="mega-featured">
<div class="tag">Most used</div>
<div class="mega-featured-title">German Grade Calculator</div>
<div class="mega-featured-desc">12,000+ runs this year.</div>
</a>
</div>
<div class="mega-col">
<h4>Academic</h4>
<ul>
<li><a href="/tools/german-grade-calculator">German Grade Calculator</a></li>
<li><a href="/tools/vpd-grade-calculator">VPD Grade Calculator</a></li>
<li><a href="/tools/ects-credit-calculator">ECTS Calculator</a></li>
</ul>
</div>
<div class="mega-col">
<h4>Money</h4>
<ul>
<li><a href="/tools/net-salary-calculator">Net Salary Calculator</a></li>
<li><a href="/tools/cost-of-living">Cost of Living</a></li>
</ul>
</div>
<div class="mega-col">
<h4>Eligibility</h4>
<ul>
<li><a href="/tools/blue-card-eligibility">Blue Card Checker</a></li>
<li><a href="/tools">All tools →</a></li>
</ul>
</div>
</div>
</div>
</li>

<li class="nav-item">
<a href="/services" class="nav-link has-mega">Services</a>
<div class="mega">
<div class="mega-grid">
<div class="mega-intro">
<div class="mega-intro-title">Services & <em class="italic">packages</em>.</div>
<p>Transparent pricing. No hidden fees. Always shown.</p>
<a href="/services/accelerator" class="mega-featured">
<div class="tag">Most chosen</div>
<div class="mega-featured-title">Accelerator · ₹1,14,999</div>
<div class="mega-featured-desc">8 apps + Zenna + Connect + visa.</div>
</a>
</div>
<div class="mega-col">
<h4>Packages</h4>
<ul>
<li><a href="/services/packages">Compare packages</a></li>
<li><a href="/services/foundation">Foundation · ₹54,999</a></li>
<li><a href="/services/accelerator">Accelerator · ₹1,14,999</a></li>
<li><a href="/services/supernova">Supernova · ₹1,96,000</a></li>
</ul>
</div>
<div class="mega-col">
<h4>Application</h4>
<ul>
<li><a href="/services/sop-writing">SOP writing</a></li>
<li><a href="/services/lor-writing">LOR writing</a></li>
<li><a href="/services/cv-preparation">CV preparation</a></li>
<li><a href="/services/application-review">Application review</a></li>
</ul>
</div>
<div class="mega-col">
<h4>Pre-arrival</h4>
<ul>
<li><a href="/services/visa-filing">Visa filing</a></li>
<li><a href="/services/blocked-account-opening">Blocked account</a></li>
<li><a href="/services/insurance-setup">Insurance setup</a></li>
<li><a href="/services/alpha-bootcamp">ALPHA bootcamp</a></li>
<li><a href="/services/post-arrival-concierge">Post-arrival concierge</a></li>
</ul>
</div>
</div>
</div>
</li>

<li class="nav-item">
<a href="/resources" class="nav-link">Resources</a>
</li>

<li class="nav-item">
<a href="/about" class="nav-link">About</a>
</li>
</ul>
</nav>

<div class="header-cta">
<a href="/enquiry" class="btn btn-primary">Get started →</a>
</div>
</div>
</header>

<!-- ============================================
01 — HERO
============================================ -->
<section class="hero">
<div class="container">
<div class="hero-grid">
<div>
<div class="eyebrow hero-eyebrow">Letters to Abroad · est. 2021</div>
<h1 class="hero-headline">We help you actually <em class="italic">arrive</em> in Germany.</h1>
<p class="hero-sub">Student-founded community. 500+ placed across 40+ German universities since 2021. Real people, real prices, real outcomes.</p>
<div class="hero-ctas">
<a href="/enquiry" class="btn btn-primary">Get started →</a>
<a href="/services/packages" class="btn btn-ghost">See packages</a>
</div>
<div class="hero-micro">
<span>Founded by Joyel V Boban</span>
<span class="dot"></span>
<span>Augsburg, Germany</span>
<span class="dot"></span>
<span>Operating from India + DE</span>
</div>
</div>

<div class="hero-envelope">
<svg class="envelope-svg" viewBox="0 0 360 280" xmlns="http://www.w3.org/2000/svg">
<!-- Envelope back -->
<rect x="20" y="60" width="320" height="200" rx="4" fill="#F4EEDF" stroke="#735DAA" stroke-width="1.5"/>
<!-- Envelope flap -->
<path d="M 20 60 L 180 170 L 340 60" fill="none" stroke="#735DAA" stroke-width="1.5"/>
<!-- Letter peeking out -->
<rect x="40" y="80" width="280" height="170" rx="2" fill="#FAF5E8" stroke="#C8BFAF" stroke-width="1"/>
<line x1="60" y1="110" x2="240" y2="110" stroke="#C8BFAF" stroke-width="1"/>
<line x1="60" y1="130" x2="280" y2="130" stroke="#C8BFAF" stroke-width="1"/>
<line x1="60" y1="150" x2="220" y2="150" stroke="#C8BFAF" stroke-width="1"/>
<line x1="60" y1="170" x2="260" y2="170" stroke="#C8BFAF" stroke-width="1"/>
<!-- Wax seal -->
<circle cx="180" cy="220" r="26" fill="#735DAA"/>
<circle cx="180" cy="220" r="26" fill="none" stroke="#5B3DC8" stroke-width="2" stroke-dasharray="2 3"/>
<text x="180" y="228" font-family="Instrument Serif, serif" font-style="italic" font-size="22" fill="#F4EEDF" text-anchor="middle">L</text>
<!-- Stamp -->
<rect x="280" y="80" width="50" height="60" fill="#FAF5E8" stroke="#D4A748" stroke-width="1.5" stroke-dasharray="3 2"/>
<text x="305" y="115" font-family="Instrument Serif, serif" font-size="14" fill="#735DAA" text-anchor="middle">DE</text>
<text x="305" y="132" font-family="JetBrains Mono, monospace" font-size="7" fill="#735DAA" text-anchor="middle">2026</text>
</svg>
</div>
</div>

<div class="hero-stats">
<div>
<div class="stat-num"><em class="italic">500</em>+</div>
<div class="stat-label">Students placed</div>
</div>
<div>
<div class="stat-num"><em class="italic">40</em>+</div>
<div class="stat-label">German universities</div>
</div>
<div>
<div class="stat-num"><em class="italic">5</em></div>
<div class="stat-label">Countries supported</div>
</div>
<div>
<div class="stat-num"><em class="italic">4</em></div>
<div class="stat-label">Products built in-house</div>
</div>
</div>
</div>
</section>

<!-- ============================================
02 — ENQUIRY FORM (inline)
============================================ -->
<section class="enquiry">
<div class="container">
<div class="enquiry-grid">
<div class="enquiry-intro">
<div class="eyebrow">Free consultation · 24h reply</div>
<h2 style="margin-top:16px">Tell us where you are. We'll tell you <em class="italic">what's next</em>.</h2>
<p>Karishma or Atheena from our team will call you at your preferred time slot — not a bot, not a sales script. A 30-minute conversation about where you actually are and what makes sense from here.</p>
<ul class="enquiry-bullets">
<li>No spam. No sales pressure. No drip campaigns.</li>
<li>Reply within 24 hours, every weekday.</li>
<li>Free even if you never become a paying student.</li>
</ul>
</div>

<div class="form-card">
<div class="form-progress">
<div class="active" id="prog-1"></div>
<div id="prog-2"></div>
<div id="prog-3"></div>
</div>

<!-- STEP 1 -->
<div class="form-step active" id="step-1">
<span class="form-step-label">Step 1 of 3</span>
<h3>Who are you and what are you looking for?</h3>

<div class="form-field">
<label for="fullName">Full name <span class="req">*</span></label>
<input type="text" id="fullName" placeholder="e.g. Priya Menon" required>
</div>

<div class="form-field">
<label for="service">Service looking for</label>
<select id="service">
<option value="">Select an option...</option>
<option>Study in Germany</option>
<option>Study in another country</option>
<option>Full-time job in Germany</option>
<option>Ausbildung</option>
<option>Visa help</option>
<option>Document services (SOP / LOR / CV)</option>
<option>Just exploring</option>
<option>Other</option>
</select>
</div>

<div class="form-field">
<label for="degree">Highest degree <span class="req">*</span></label>
<select id="degree" required>
<option value="">Select your degree...</option>
<option>12th / High School</option>
<option>Bachelor's (in progress)</option>
<option>Bachelor's (completed)</option>
<option>Master's (in progress)</option>
<option>Master's (completed)</option>
<option>PhD</option>
<option>Other</option>
</select>
</div>

<div class="form-actions">
<span></span>
<button class="btn btn-primary" onclick="nextStep(2)">Continue →</button>
</div>
</div>

<!-- STEP 2 -->
<div class="form-step" id="step-2">
<span class="form-step-label">Step 2 of 3</span>
<h3>How do we reach you?</h3>

<div class="form-field">
<label for="email">Email address <span class="req">*</span></label>
<input type="email" id="email" placeholder="you@example.com" required>
</div>

<div class="form-row">
<div class="form-field">
<label for="location">Location</label>
<input type="text" id="location" placeholder="City, Country">
</div>
<div class="form-field">
<label for="phone">Contact number <span class="req">*</span></label>
<input type="tel" id="phone" placeholder="+91 98xxx xxxxx" required>
</div>
</div>

<div class="form-actions">
<button class="form-back" onclick="prevStep(1)">← Back</button>
<button class="btn btn-primary" onclick="nextStep(3)">Continue →</button>
</div>
</div>

<!-- STEP 3 -->
<div class="form-step" id="step-3">
<span class="form-step-label">Step 3 of 3</span>
<h3>When should we call you?</h3>

<div class="form-field">
<label>Preferred contact time (IST) <span class="req">*</span></label>
<div class="form-time-options">
<div>
<input type="radio" id="t1" name="time" value="8-12">
<label for="t1"><strong>8 — 12</strong>Morning</label>
</div>
<div>
<input type="radio" id="t2" name="time" value="12-16">
<label for="t2"><strong>12 — 16</strong>Afternoon</label>
</div>
<div>
<input type="radio" id="t3" name="time" value="16-20">
<label for="t3"><strong>16 — 20</strong>Evening</label>
</div>
</div>
</div>

<div class="form-actions">
<button class="form-back" onclick="prevStep(2)">← Back</button>
<button class="btn btn-primary" onclick="submitForm()">Get my callback →</button>
</div>

<p class="form-trust">No spam. We reply in 24 hrs. A human will call you, not a bot.</p>
</div>
</div>
</div>
</div>
</section>

<!-- ============================================
03 — UNIVERSITY MARQUEE
============================================ -->
<section class="marquee" style="padding: 60px 0;">
<div class="marquee-label">Our students study at</div>
<div class="marquee-track">
<div class="marquee-item">TU Munich</div>
<div class="marquee-item">·</div>
<div class="marquee-item">RWTH Aachen</div>
<div class="marquee-item">·</div>
<div class="marquee-item">TU Berlin</div>
<div class="marquee-item">·</div>
<div class="marquee-item">FU Berlin</div>
<div class="marquee-item">·</div>
<div class="marquee-item">TU Dresden</div>
<div class="marquee-item">·</div>
<div class="marquee-item">KIT</div>
<div class="marquee-item">·</div>
<div class="marquee-item">Uni Heidelberg</div>
<div class="marquee-item">·</div>
<div class="marquee-item">Uni Bonn</div>
<div class="marquee-item">·</div>
<div class="marquee-item">Uni Mannheim</div>
<div class="marquee-item">·</div>
<div class="marquee-item">TU Clausthal</div>
<div class="marquee-item">·</div>
<div class="marquee-item">Uni Paderborn</div>
<div class="marquee-item">·</div>
<div class="marquee-item">Uni Duisburg-Essen</div>
<div class="marquee-item">·</div>
<!-- Duplicate for seamless scroll -->
<div class="marquee-item">TU Munich</div>
<div class="marquee-item">·</div>
<div class="marquee-item">RWTH Aachen</div>
<div class="marquee-item">·</div>
<div class="marquee-item">TU Berlin</div>
<div class="marquee-item">·</div>
<div class="marquee-item">FU Berlin</div>
<div class="marquee-item">·</div>
<div class="marquee-item">TU Dresden</div>
<div class="marquee-item">·</div>
<div class="marquee-item">KIT</div>
<div class="marquee-item">·</div>
<div class="marquee-item">Uni Heidelberg</div>
<div class="marquee-item">·</div>
<div class="marquee-item">Uni Bonn</div>
<div class="marquee-item">·</div>
<div class="marquee-item">Uni Mannheim</div>
<div class="marquee-item">·</div>
<div class="marquee-item">TU Clausthal</div>
<div class="marquee-item">·</div>
<div class="marquee-item">Uni Paderborn</div>
<div class="marquee-item">·</div>
<div class="marquee-item">Uni Duisburg-Essen</div>
<div class="marquee-item">·</div>
</div>
</section>

<!-- ============================================
04 — AWARDS STRIP
============================================ -->
<section class="awards-strip">
<div class="container">
<div class="awards-strip-inner">
<div class="awards-label">Recognition · 2023 — 2026</div>
<div class="award">
<div class="award-icon"></div>
<div><strong>EdTech 25</strong><span>Student-led venture 2024</span></div>
</div>
<div class="award">
<div class="award-icon"></div>
<div><strong>Indian Express</strong><span>30 Under 30 · 2024</span></div>
</div>
<div class="award">
<div class="award-icon"></div>
<div><strong>YourStory</strong><span>Featured · 2025</span></div>
</div>
<div class="award">
<div class="award-icon"></div>
<div><strong>DAAD India</strong><span>Recognized partner</span></div>
</div>
</div>
</div>
</section>

<!-- ============================================
05 — WHAT IS LTA (dark contrast)
============================================ -->
<section style="padding: 0;">
<div class="container">
<div class="dark-section">
<div class="dark-inner">
<div class="eyebrow">What we are</div>
<h2 class="dark-headline">Not a consultancy. A community that <em class="italic">does the work</em>.</h2>

<div class="dark-three">
<div class="dark-three-item">
<h4>Founded by a student, for students.</h4>
<p>Joyel V Boban started LTA from his Regensburg dorm in 2021 after watching peers get burned by predatory agencies. He's still running it.</p>
</div>
<div class="dark-three-item">
<h4>500+ placed. 40+ universities. Numbers we can name.</h4>
<p>Every number on this site links to a real person who'll tell you about their journey. Ask for an intro.</p>
</div>
<div class="dark-three-item">
<h4>Honest pricing on every page.</h4>
<p>No "request a quote". No price-on-call. Foundation, Accelerator, and Supernova prices are public — including non-refundable fees.</p>
</div>
</div>

<div class="founder-card">
<div class="founder-avatar">J</div>
<div>
<div class="founder-quote">"I built LTA because I was scammed twice in my own application year. Every feature on this site is an answer to a moment I wish someone had walked me through."</div>
<div class="founder-name"><strong>Joyel V Boban</strong> · Founder · M.Sc. Uni Duisburg-Essen · Currently Propulsion PM Intern, Rocket Factory Augsburg</div>
</div>
</div>
</div>
</div>
</div>
</section>

<!-- ============================================
06 — HOW IT WORKS
============================================ -->
<section>
<div class="container">
<div class="section-head">
<div class="section-head-text">
<div class="eyebrow">Process · 04 steps</div>
<h2>Four steps from "is this real" to <em class="italic">"I have a seat"</em>.</h2>
</div>
</div>

<div class="how-grid">
<div class="how-step">
<div class="how-num">01</div>
<h4>Free consultation</h4>
<p>30 minutes with Karishma or Atheena. We tell you if Germany is the right move — or honestly suggest somewhere better.</p>
<a href="/enquiry">Book my slot →</a>
</div>
<div class="how-step">
<div class="how-num">02</div>
<h4>Shortlist + apply</h4>
<p>Jisha's team handles SOP, LOR, CV, university selection, and document logistics. 8 applications, 1 narrative.</p>
<a href="/services/packages">See packages →</a>
</div>
<div class="how-step">
<div class="how-num">03</div>
<h4>Visa + setup</h4>
<p>Blocked account, health insurance, visa filing, flight, and pre-departure orientation. Receipts for everything.</p>
<a href="/services/visa-filing">Visa filing service →</a>
</div>
<div class="how-step">
<div class="how-num">04</div>
<h4>45-day concierge</h4>
<p>Anmeldung, SIM, Deutschland Ticket, bank account, first WG. Real humans, real meet-ups in your city.</p>
<a href="/services/post-arrival-concierge">Concierge details →</a>
</div>
</div>
</div>
</section>

<!-- ============================================
07 — SERVICES PREVIEW
============================================ -->
<section style="background: var(--paper-warm); padding: 120px 0;">
<div class="container">
<div class="section-head">
<div class="section-head-text">
<div class="eyebrow">Services</div>
<h2>Pick what you need. Or take the <em class="italic">bundle</em>.</h2>
<p>Every service on this site has its own page with what's included, who delivers it, real reviews, and a transparent price. Bundle them via Foundation, Accelerator, or Supernova.</p>
</div>
</div>

<div class="services-grid">
<div class="service-card">
<div class="service-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 4h12l4 4v12H4z M16 4v4h4 M8 12h8 M8 16h6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3>SOP writing</h3>
<p>1500–2000 word Statement of Purpose. 3 rounds of revision. Plagiarism check. Submitted in PDF + Word.</p>
<div class="service-price">Starting from <strong>₹4,999</strong></div>
<a href="/services/sop-writing" class="btn-link">Learn more</a>
</div>
<div class="service-card">
<div class="service-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M6 4h12v16H6z M9 8h6 M9 12h6 M9 16h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<h3>LOR writing</h3>
<p>Letters of Recommendation drafted with your referee's input. Up to 3 LORs. German-academic tone.</p>
<div class="service-price">Starting from <strong>₹3,499</strong></div>
<a href="/services/lor-writing" class="btn-link">Learn more</a>
</div>
<div class="service-card">
<div class="service-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M5 5h14v14H5z M8 9h8 M8 13h6 M8 17h4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<h3>CV preparation</h3>
<p>German-standard 1-page CV. Tabular Lebenslauf style. With and without photo versions.</p>
<div class="service-price">Starting from <strong>₹2,999</strong></div>
<a href="/services/cv-preparation" class="btn-link">Learn more</a>
</div>
<div class="service-card">
<div class="service-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 12l4-4 4 4 6-6 4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3>Application review</h3>
<p>End-to-end audit before submission. Spot university-specific red flags. Last-line defense.</p>
<div class="service-price">Starting from <strong>₹3,999</strong></div>
<a href="/services/application-review" class="btn-link">Learn more</a>
</div>
<div class="service-card">
<div class="service-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M4 7h16v12H4z M4 7l8-3 8 3 M8 14h2 M14 14h2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3>Visa filing</h3>
<p>End-to-end visa support: VFS appointment, document checklist, mock interview, embassy follow-up.</p>
<div class="service-price">Starting from <strong>₹14,999</strong></div>
<a href="/services/visa-filing" class="btn-link">Learn more</a>
</div>
<div class="service-card">
<div class="service-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M3 10h18 M5 6h14v12H5z M9 14h2 M13 14h2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
</div>
<h3>Blocked account</h3>
<p>Sperrkonto opening with Fintiba, Expatrio, or Coracle. €11,904 deposit support letters included.</p>
<div class="service-price">Starting from <strong>₹4,999</strong></div>
<a href="/services/blocked-account-opening" class="btn-link">Learn more</a>
</div>
<div class="service-card">
<div class="service-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 3l8 4v5c0 5-3 8-8 9-5-1-8-4-8-9V7z M9 12l2 2 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3>Insurance setup</h3>
<p>Public (TK, AOK, Barmer) or private insurance comparison + enrollment. Travel + student variants.</p>
<div class="service-price">Starting from <strong>₹2,499</strong></div>
<a href="/services/insurance-setup" class="btn-link">Learn more</a>
</div>
<div class="service-card">
<div class="service-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M12 2l3 7h7l-5 5 2 8-7-4-7 4 2-8-5-5h7z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3>ALPHA bootcamp</h3>
<p>90-day intensive: A1+A2 German, CV coaching, mock interviews, networking, mentor calls.</p>
<div class="service-price">Included in <strong>Supernova</strong></div>
<a href="/services/alpha-bootcamp" class="btn-link">Learn more</a>
</div>
<div class="service-card">
<div class="service-icon">
<svg width="22" height="22" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5 9-12 M3 7v10a2 2 0 002 2h14a2 2 0 002-2V7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3>Post-arrival concierge</h3>
<p>45-day in-Germany support: Anmeldung, SIM, transport pass, bank, first WG. Local meet-ups.</p>
<div class="service-price">Included in <strong>Supernova</strong></div>
<a href="/services/post-arrival-concierge" class="btn-link">Learn more</a>
</div>
</div>
</div>
</section>

<!-- ============================================
08 — PRODUCTS HUB
============================================ -->
<section>
<div class="container">
<div class="section-head">
<div class="section-head-text">
<div class="eyebrow">We built this · 04 products</div>
<h2>Four products. Each one because nothing on the market <em class="italic">did the job</em>.</h2>
</div>
<a href="/products" class="btn-link">All products</a>
</div>

<div class="products-grid">
<a href="/products/zenna" class="product-card">
<span class="product-tag live">Live</span>
<h3>✦ LTA Zenna</h3>
<p>AI-powered SOP and document copilot for German university applications. Draft, refine, and finalize with structured AI guidance trained on 500+ accepted documents.</p>
<span class="product-cta">Open Zenna →</span>
</a>
<a href="https://connect.letterstoabroad.com" target="_blank" rel="noopener" class="product-card">
<span class="product-tag live">Live · External</span>
<h3>⇢ LTA Connect</h3>
<p>Book 1-on-1 calls with current students and alumni at German universities. Topmate-style mentor platform — paid per session, by the people who actually did it.</p>
<span class="product-cta">Open Connect <span class="product-ext-icon"></span></span>
</a>
<a href="/products/course-shortlisting" class="product-card featured">
<span class="product-tag new">Featured · New</span>
<h3>◈ Course Shortlisting</h3>
<p>Profile in, ranked university list out — with admit %. Built with Jisha's applications team on 500+ historical placements. The fastest way to know where you stand.</p>
<span class="product-cta">Try the tool →</span>
</a>
<a href="https://project004.letterstoabroad.com" target="_blank" rel="noopener" class="product-card">
<span class="product-tag beta">Beta · External</span>
<h3>▲ Project004</h3>
<p>Candidate management platform for full-time jobs and ausbildung. Built for Indian professionals targeting Germany. Onboard, match with employers, get hired.</p>
<span class="product-cta">Open Project004 <span class="product-ext-icon"></span></span>
</a>
</div>
</div>
</section>

<!-- ============================================
09 — TOOLS SHOWCASE
============================================ -->
<section style="background: var(--paper); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);">
<div class="container">
<div class="section-head">
<div class="section-head-text">
<div class="eyebrow">Tools · Always free</div>
<h2>Use them <em class="italic">without</em> signing up.</h2>
<p>Six calculators that answer the questions every Germany-bound student asks before they trust anyone. No email gate. No login wall.</p>
</div>
<a href="/tools" class="btn-link">All tools</a>
</div>

<div class="tools-grid">
<a href="/tools/german-grade-calculator" class="tool-card">
<svg class="tool-icon" viewBox="0 0 24 24" fill="none"><path d="M5 19l4-16 6 12 4-8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<h4>German Grade Calculator</h4>
<p>Convert Indian CGPA or percentage to the German 1.0–5.0 grade scale via the modified Bavarian formula.</p>
<span class="btn-link">Open tool</span>
</a>
<a href="/tools/vpd-grade-calculator" class="tool-card">
<svg class="tool-icon" viewBox="0 0 24 24" fill="none"><path d="M4 4h16v16H4z M9 9l6 6 M15 9l-6 6" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<h4>VPD Grade Calculator</h4>
<p>Predict your Uni-assist VPD grade before paying their fee. Country-aware conversion logic.</p>
<span class="btn-link">Open tool</span>
</a>
<a href="/tools/net-salary-calculator" class="tool-card">
<svg class="tool-icon" viewBox="0 0 24 24" fill="none"><path d="M12 3v18 M16 7H10a2 2 0 100 4h4a2 2 0 010 4H8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<h4>Net Salary Calculator</h4>
<p>Gross to take-home pay by tax class, state, and church-tax toggle. 2026 thresholds, all 6 classes.</p>
<span class="btn-link">Open tool</span>
</a>
<a href="/tools/cost-of-living" class="tool-card">
<svg class="tool-icon" viewBox="0 0 24 24" fill="none"><path d="M3 21V8l9-5 9 5v13 M9 21v-8h6v8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<h4>Cost of Living Calculator</h4>
<p>Real numbers for Munich, Berlin, Frankfurt, Leipzig and 11 other cities. WG vs studio vs 1-room.</p>
<span class="btn-link">Open tool</span>
</a>
<a href="/tools/ects-credit-calculator" class="tool-card">
<svg class="tool-icon" viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="9" stroke="currentColor" stroke-width="1.5"/><path d="M8 12h8 M12 8v8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
<h4>ECTS Credit Calculator</h4>
<p>Convert source-country credits to ECTS. Check the 180-ECTS Bachelor minimum for German Master's.</p>
<span class="btn-link">Open tool</span>
</a>
<a href="/tools/blue-card-eligibility" class="tool-card">
<svg class="tool-icon" viewBox="0 0 24 24" fill="none"><path d="M12 2L4 6v6c0 5 3 9 8 10 5-1 8-5 8-10V6z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
<h4>Blue Card Eligibility</h4>
<p>Check if you meet the 2026 EU Blue Card thresholds — general €48,300 / shortage occupations €43,759.80.</p>
<span class="btn-link">Open tool</span>
</a>
</div>
</div>
</section>

<!-- ============================================
10 — STUDY TRACKS (5 countries)
============================================ -->
<section>
<div class="container">
<div class="section-head">
<div class="section-head-text">
<div class="eyebrow">Study tracks · 05 countries</div>
<h2>Five countries. <em class="italic">One</em> way of doing things.</h2>
<p>Germany is where 90% of our students go — that's where the depth is. Other tracks are in active build; join the waitlist to get notified first.</p>
</div>
</div>

<div class="country-grid">
<a href="/study/germany" class="country-card primary">
<div class="country-flag">🇩🇪</div>
<h4>Germany</h4>
<p>Tuition-free public universities, 400+ English-taught Master's, 18-month post-study work visa. Our home market — full content, full support.</p>
<div class="country-status">Full track · Live</div>
<span class="btn-link" style="margin-top: 8px;">Explore Germany</span>
</a>
<a href="/study/austria" class="country-card">
<div class="country-flag">🇦🇹</div>
<h4>Austria</h4>
<p>German-speaking, lower fees, Alps adjacent.</p>
<div class="country-status">Coming soon</div>
<span class="btn-link" style="margin-top: 8px;">Join waitlist</span>
</a>
<a href="/study/spain" class="country-card">
<div class="country-flag">🇪🇸</div>
<h4>Spain</h4>
<p>English programs growing, climate easy.</p>
<div class="country-status">Coming soon</div>
<span class="btn-link" style="margin-top: 8px;">Join waitlist</span>
</a>
<a href="/study/netherlands" class="country-card">
<div class="country-flag">🇳🇱</div>
<h4>Netherlands</h4>
<p>English-fluent, research-strong.</p>
<div class="country-status">Coming soon</div>
<span class="btn-link" style="margin-top: 8px;">Join waitlist</span>
</a>
<a href="/study/italy" class="country-card">
<div class="country-flag">🇮🇹</div>
<h4>Italy</h4>
<p>Affordable, design + engineering focus.</p>
<div class="country-status">Coming soon</div>
<span class="btn-link" style="margin-top: 8px;">Join waitlist</span>
</a>
</div>
</div>
</section>

<!-- ============================================
11 — ALPHA BOOTCAMP
============================================ -->
<section style="padding: 0;">
<div class="container">
<div class="alpha">
<div class="alpha-inner">
<div>
<span class="alpha-tag">Signature program</span>
<h2>ALPHA — your first <em class="italic">90 days</em> in Germany, hacked.</h2>
<p>The transition program we wish someone had run for us. Three months of language, networking, paperwork, and human contact — bundled into a single program included in Supernova.</p>
<ul class="alpha-features">
<li>A1 + A2 German foundation</li>
<li>Job application coaching</li>
<li>Networking events in your city</li>
<li>Mentor introductions</li>
<li>Anmeldung + bank + tax setup</li>
<li>Cohort-based, never solo</li>
</ul>
<a href="/services/alpha-bootcamp" class="btn btn-primary">ALPHA bootcamp details →</a>
</div>
<div class="alpha-visual">
<div class="alpha-visual-big">α</div>
<div class="alpha-visual-small">A1 → A2 → arrived</div>
</div>
</div>
</div>
</div>
</section>

<!-- ============================================
12 — TESTIMONIALS MARQUEE
============================================ -->
<section class="testimonials">
<div class="container">
<div class="section-head">
<div class="section-head-text">
<div class="eyebrow">Students who arrived</div>
<h2>Names. Universities. <em class="italic">Receipts</em>.</h2>
</div>
</div>
</div>

<div class="testimonials-track">
<div class="testimonial-card">
<div class="quote">"The visa filing was the part I was most scared of. LTA's team booked my VFS slot, did a mock interview, and told me exactly what to wear. Approved in 4 weeks."</div>
<div class="testimonial-meta">
<div class="testimonial-avatar">S</div>
<div>
<div class="testimonial-name">Stephin Joseph</div>
<div class="testimonial-uni">M.Sc. Logistics · Uni Duisburg-Essen</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="quote">"Got into TU Dresden through their shortlisting tool's recommendation. I wasn't even considering Dresden — turned out to be the perfect fit for biodiversity."</div>
<div class="testimonial-meta">
<div class="testimonial-avatar">G</div>
<div>
<div class="testimonial-name">Gladia Thomas</div>
<div class="testimonial-uni">M.Sc. Biodiversity · TU Dresden</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="quote">"Karishma's call wasn't a sales pitch. She literally told me Germany wasn't the right call for my profile and suggested I look at Italy. Then I came back for TUM anyway."</div>
<div class="testimonial-meta">
<div class="testimonial-avatar">F</div>
<div>
<div class="testimonial-name">Fathima Sulaiman</div>
<div class="testimonial-uni">M.Sc. Biogenic Resources · TUM</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="quote">"The 45-day concierge thing sounded gimmicky until day 3 when Atheena physically walked me through Anmeldung. That hour saved me a week of confusion."</div>
<div class="testimonial-meta">
<div class="testimonial-avatar">R</div>
<div>
<div class="testimonial-name">Rizvan PM</div>
<div class="testimonial-uni">M.Sc. Physics · Uni Paderborn</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="quote">"I came to LTA after being scammed by a Bangalore consultancy. The legal aid network actually got me a refund. That's when I trusted them with my actual applications."</div>
<div class="testimonial-meta">
<div class="testimonial-avatar">H</div>
<div>
<div class="testimonial-name">Haritha Unni</div>
<div class="testimonial-uni">M.Sc. Polymer Science · FU Berlin</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="quote">"Zenna helped me draft my SOP in a weekend. Jisha then tore it apart and we rebuilt it. I learned more about writing for German academic style in 2 weeks than 4 years of college."</div>
<div class="testimonial-meta">
<div class="testimonial-avatar">S</div>
<div>
<div class="testimonial-name">Shawn M. Mathew</div>
<div class="testimonial-uni">M.Sc. Intelligent Manufacturing · TU Clausthal</div>
</div>
</div>
</div>
<!-- Duplicate for seamless scroll -->
<div class="testimonial-card">
<div class="quote">"The visa filing was the part I was most scared of. LTA's team booked my VFS slot, did a mock interview, and told me exactly what to wear. Approved in 4 weeks."</div>
<div class="testimonial-meta">
<div class="testimonial-avatar">S</div>
<div>
<div class="testimonial-name">Stephin Joseph</div>
<div class="testimonial-uni">M.Sc. Logistics · Uni Duisburg-Essen</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="quote">"Got into TU Dresden through their shortlisting tool's recommendation. I wasn't even considering Dresden — turned out to be the perfect fit for biodiversity."</div>
<div class="testimonial-meta">
<div class="testimonial-avatar">G</div>
<div>
<div class="testimonial-name">Gladia Thomas</div>
<div class="testimonial-uni">M.Sc. Biodiversity · TU Dresden</div>
</div>
</div>
</div>
<div class="testimonial-card">
<div class="quote">"Karishma's call wasn't a sales pitch. She literally told me Germany wasn't the right call for my profile and suggested I look at Italy. Then I came back for TUM anyway."</div>
<div class="testimonial-meta">
<div class="testimonial-avatar">F</div>
<div>
<div class="testimonial-name">Fathima Sulaiman</div>
<div class="testimonial-uni">M.Sc. Biogenic Resources · TUM</div>
</div>
</div>
</div>
</div>
</section>

<!-- ============================================
13 — PACKAGES
============================================ -->
<section class="pricing">
<div class="container">
<div class="section-head">
<div class="section-head-text">
<div class="eyebrow">Pricing · Always shown</div>
<h2>Transparent on purpose. Including the <em class="italic">non-refundable</em> bits.</h2>
<p>Three paid tiers + one always-free community. Every fee, including enrolment and initial deposits, disclosed before you pay anything.</p>
</div>
</div>

<!-- Community banner -->
<div class="community-banner">
<div class="community-banner-left">
<span class="community-tag">Community · ₹0</span>
<div>
<h4>Always free. No signup gate.</h4>
<p>Tools · peer community · legal aid network · events · scam alerts</p>
</div>
</div>
<a href="/community" class="btn btn-ghost">Join community →</a>
</div>

<div class="pricing-grid">
<div class="price-card">
<div class="price-name">Foundation</div>
<div class="price-blurb">For students who know their list and need execution.</div>
<div class="price-amount"><span class="currency"></span>54,999</div>
<div class="price-fees">+ ₹10,000 enrolment fee + ₹5,000 initial fee (both non-refundable)</div>
<ul class="price-features">
<li>3–4 university applications</li>
<li>1 intake</li>
<li>Student-selected shortlist</li>
<li>LTA Zenna access</li>
<li>Visa filing · blocked account · insurance</li>
</ul>
<a href="/services/foundation" class="price-cta">Choose Foundation →</a>
</div>

<div class="price-card featured">
<div class="featured-badge">Most chosen</div>
<div class="price-name">Accelerator</div>
<div class="price-blurb">For students who want guidance + applications + community.</div>
<div class="price-amount"><span class="currency"></span>1,14,999</div>
<div class="price-fees">+ ₹15,000 enrolment + ₹5,000 initial (both non-refundable)</div>
<ul class="price-features">
<li>8 university applications</li>
<li>Expert-led shortlist</li>
<li>LTA Zenna + Connect access</li>
<li>Visa filing · blocked account · insurance</li>
<li>Priority team support</li>
</ul>
<a href="/services/accelerator" class="price-cta">Choose Accelerator →</a>
</div>

<div class="price-card">
<div class="price-name">Supernova</div>
<div class="price-blurb">The full stack — pre-departure to first 45 days in Germany.</div>
<div class="price-amount"><span class="currency"></span>1,96,000</div>
<div class="price-fees">+ ₹25,000 enrolment + ₹5,000 initial (both non-refundable)</div>
<ul class="price-features">
<li>Unlimited applications · 3 intakes</li>
<li>LTA shortlist up to 18 unis</li>
<li>German A1 + A2 · ALPHA bootcamp</li>
<li>45-day post-arrival concierge</li>
<li>Anmeldung · SIM · Deutschland Ticket</li>
<li>Forex + loan partners</li>
</ul>
<a href="/services/supernova" class="price-cta">Choose Supernova →</a>
</div>
</div>
</div>
</section>

<!-- ============================================
14 — VISA OPTIONS
============================================ -->
<section style="background: var(--paper);">
<div class="container">
<div class="section-head">
<div class="section-head-text">
<div class="eyebrow">Visa paths · 06 options</div>
<h2>Six visas. We <em class="italic">file four</em> of them ourselves.</h2>
<p>Each visa page has eligibility, document checklist, real timelines, common rejection reasons, and a transparent fee for our filing service.</p>
</div>
<a href="/live/visa-types" class="btn-link">All visa types</a>
</div>

<div class="visa-grid">
<a href="/live/student-visa" class="visa-card">
<div class="visa-num">01 · §16b AufenthG</div>
<h4>Student Visa</h4>
<p>For students with university admission. Requires Sperrkonto €11,904 + health insurance + admission letter.</p>
<div class="visa-fee">LTA filing service · <strong>₹14,999</strong></div>
<span class="btn-link">See full guide</span>
</a>
<a href="/live/job-seeker-visa" class="visa-card">
<div class="visa-num">02 · §20 AufenthG</div>
<h4>Job Seeker Visa</h4>
<p>6-month visa to search for jobs. Requires recognized degree + funds + accommodation proof.</p>
<div class="visa-fee">LTA filing service · <strong>₹17,999</strong></div>
<span class="btn-link">See full guide</span>
</a>
<a href="/live/blue-card" class="visa-card">
<div class="visa-num">03 · §18b AufenthG</div>
<h4>EU Blue Card</h4>
<p>For qualified professionals with job offer above €48,300 (general) or €43,759.80 (shortage occupations).</p>
<div class="visa-fee">LTA filing service · <strong>₹19,999</strong></div>
<span class="btn-link">See full guide</span>
</a>
<a href="/live/family-reunion-visa" class="visa-card">
<div class="visa-num">04 · §28-30 AufenthG</div>
<h4>Family Reunion Visa</h4>
<p>For spouses and children of visa holders. A1 German typically required for spouses.</p>
<div class="visa-fee">LTA filing service · <strong>Available on request</strong></div>
<span class="btn-link">See full guide</span>
</a>
<a href="/live/freelance-visa" class="visa-card">
<div class="visa-num">05 · §21 AufenthG</div>
<h4>Freelance Visa</h4>
<p>For self-employed and freelancers. Requires business plan + financial proof + licenses where applicable.</p>
<div class="visa-fee">LTA filing service · <strong>Available on request</strong></div>
<span class="btn-link">See full guide</span>
</a>
<a href="/live/ausbildung-visa" class="visa-card">
<div class="visa-num">06 · §16a AufenthG</div>
<h4>Ausbildung Visa</h4>
<p>For vocational training. Requires Ausbildung contract + accommodation + funds.</p>
<div class="visa-fee">Filing via <strong>Project004</strong></div>
<span class="btn-link">See full guide</span>
</a>
</div>
</div>
</section>

<!-- ============================================
15 — SCAM ALERTS (CLICKABLE)
============================================ -->
<section class="scam-alerts">
<div class="container">
<div class="section-head">
<div class="section-head-text">
<div class="eyebrow" style="color: var(--terracotta);">Scam alerts · Updated monthly</div>
<h2>Real cases. Real <em class="italic">receipts</em>.</h2>
<p>Investigations into the consultancies, agents, and "university representatives" preying on Indian students. Tap any card to read the full investigation.</p>
</div>
</div>

<div class="scam-grid">
<a href="/blog/scam-alerts/hyderabad-fake-offer-letters" class="scam-card">
<div class="scam-meta">
<span class="scam-tag">Active · Ongoing</span>
<span style="color: var(--ink-soft);">Published Mar 2026</span>
</div>
<h4>The Hyderabad fake-offer-letter ring</h4>
<p>Three "consultancies" sharing forged TU Munich and RWTH Aachen offer letters. ₹3.5L average per victim. Police complaints filed in Telangana.</p>
<div class="scam-stats">
<div><strong>14</strong>Reported victims</div>
<div><strong>₹49L</strong>Estimated loss</div>
<div><strong>3</strong>Agencies linked</div>
</div>
<span class="scam-read-link">Read full investigation →</span>
</a>

<a href="/blog/scam-alerts/bangalore-daad-scam" class="scam-card">
<div class="scam-meta">
<span class="scam-tag resolved">Resolved · Still active warning</span>
<span style="color: var(--ink-soft);">Published Jan 2026</span>
</div>
<h4>Bangalore consultancy charging ₹3L for free DAAD scholarship applications</h4>
<p>Agency closed after Consumer Court ruling. Founders started a new firm under different name within 60 days — same template, same victims.</p>
<div class="scam-stats">
<div><strong>27</strong>Reported victims</div>
<div><strong>₹81L</strong>Estimated loss</div>
<div><strong>2</strong>Agencies linked</div>
</div>
<span class="scam-read-link">Read full investigation →</span>
</a>

<a href="/blog/scam-alerts/whatsapp-university-rep" class="scam-card">
<div class="scam-meta">
<span class="scam-tag">Active · Ongoing</span>
<span style="color: var(--ink-soft);">Published Feb 2026</span>
</div>
<h4>WhatsApp 'university representative' impersonation scam</h4>
<p>Profiles impersonating Uni Heidelberg and Uni Mannheim admissions staff. ₹50K – ₹2L "application processing" fees demanded. WhatsApp accounts cycling every 48 hours.</p>
<div class="scam-stats">
<div><strong>9</strong>Reported victims</div>
<div><strong>₹11L</strong>Estimated loss</div>
<div><strong>Ongoing</strong>Across India</div>
</div>
<span class="scam-read-link">Read full investigation →</span>
</a>

<a href="/blog/scam-alerts/fake-blocked-accounts" class="scam-card">
<div class="scam-meta">
<span class="scam-tag">Active · Ongoing</span>
<span style="color: var(--ink-soft);">Published Apr 2026</span>
</div>
<h4>Fake blocked account providers: 3 confirmed in 2025–2026</h4>
<p>Cloned websites mimicking Fintiba, Expatrio, and Coracle. €11,904 deposits never reach German escrow. Embassy detects, visa refused, money lost.</p>
<div class="scam-stats">
<div><strong>6</strong>Reported victims</div>
<div><strong>€71K</strong>Estimated loss</div>
<div><strong>3</strong>Fake providers</div>
</div>
<span class="scam-read-link">Read full investigation →</span>
</a>
</div>

<div class="scam-submit-band">
<div>
<h4>Got scammed? Help us warn the next student.</h4>
<p>Submit your story with image and audio evidence. Anonymous submissions OK. Moderated within 72 hours. Lawyer review before any names are published.</p>
</div>
<a href="/scam-submit" class="btn">Submit your story →</a>
</div>
</div>
</section>

<!-- ============================================
16 — LEGAL AID NETWORK (India map)
============================================ -->
<section class="legal-aid">
<div class="container">
<div class="section-head">
<div class="section-head-text">
<div class="eyebrow">Legal Aid Network · 12 cities</div>
<h2>If you've been scammed, you're <em class="italic">not</em> alone.</h2>
<p>Verified consumer-court lawyers across 12 Indian cities. Free first 30-minute consultation for anyone in the LTA community — paying student or not.</p>
</div>
</div>

<div class="legal-aid-grid">
<div class="india-map">
<svg viewBox="0 0 400 460" xmlns="http://www.w3.org/2000/svg">
<!-- Geographically accurate India outline (simplified from real GeoJSON) -->
<path class="india-path" d="
M 152 50
L 168 38
L 195 32
L 230 38
L 248 55
L 252 80
L 235 95
L 218 92
L 240 110
L 268 108
L 285 122
L 308 135
L 322 158
L 318 178
L 305 195
L 320 212
L 335 232
L 340 258
L 332 285
L 322 308
L 308 332
L 292 358
L 275 380
L 250 395
L 222 402
L 198 408
L 175 418
L 158 425
L 152 415
L 162 395
L 168 372
L 162 348
L 152 328
L 142 308
L 128 295
L 115 278
L 108 258
L 102 235
L 95 215
L 88 192
L 82 170
L 78 148
L 82 128
L 92 110
L 105 92
L 122 78
L 138 62
Z
"/>
<!-- North-East arm -->
<path class="india-path" d="
M 318 178
L 340 175
L 360 168
L 372 180
L 365 200
L 348 210
L 332 205
Z
"/>

<!-- 12 city pins -->
<!-- New Delhi -->
<circle class="city-pin-pulse" cx="180" cy="120" r="4"/>
<circle class="city-pin" cx="180" cy="120" r="4"/>
<!-- Mumbai -->
<circle class="city-pin-pulse" cx="118" cy="245" r="4"/>
<circle class="city-pin" cx="118" cy="245" r="4"/>
<!-- Bangalore -->
<circle class="city-pin-pulse" cx="170" cy="335" r="4"/>
<circle class="city-pin" cx="170" cy="335" r="4"/>
<!-- Chennai -->
<circle class="city-pin-pulse" cx="210" cy="345" r="4"/>
<circle class="city-pin" cx="210" cy="345" r="4"/>
<!-- Hyderabad -->
<circle class="city-pin-pulse" cx="190" cy="290" r="4"/>
<circle class="city-pin" cx="190" cy="290" r="4"/>
<!-- Pune -->
<circle class="city-pin-pulse" cx="135" cy="252" r="4"/>
<circle class="city-pin" cx="135" cy="252" r="4"/>
<!-- Kolkata -->
<circle class="city-pin-pulse" cx="282" cy="218" r="4"/>
<circle class="city-pin" cx="282" cy="218" r="4"/>
<!-- Kochi -->
<circle class="city-pin-pulse" cx="172" cy="380" r="4"/>
<circle class="city-pin" cx="172" cy="380" r="4"/>
<!-- Ahmedabad -->
<circle class="city-pin-pulse" cx="125" cy="195" r="4"/>
<circle class="city-pin" cx="125" cy="195" r="4"/>
<!-- Jaipur -->
<circle class="city-pin-pulse" cx="155" cy="155" r="4"/>
<circle class="city-pin" cx="155" cy="155" r="4"/>
<!-- Lucknow -->
<circle class="city-pin-pulse" cx="218" cy="148" r="4"/>
<circle class="city-pin" cx="218" cy="148" r="4"/>
<!-- Guwahati -->
<circle class="city-pin-pulse" cx="335" cy="180" r="4"/>
<circle class="city-pin" cx="335" cy="180" r="4"/>
</svg>
<div class="map-legend">12 verified lawyer locations</div>
</div>

<div>
<div class="legal-cities">
<a class="legal-city">
<strong>New Delhi</strong>
<span>Consumer law · Adv. M. Sharma</span>
</a>
<a class="legal-city">
<strong>Mumbai</strong>
<span>Cyber fraud · Adv. R. Iyer</span>
</a>
<a class="legal-city">
<strong>Bangalore</strong>
<span>Consumer court · Adv. K. Naidu</span>
</a>
<a class="legal-city">
<strong>Chennai</strong>
<span>Civil + cyber · Adv. P. Krishnan</span>
</a>
<a class="legal-city">
<strong>Hyderabad</strong>
<span>Education fraud · Adv. S. Reddy</span>
</a>
<a class="legal-city">
<strong>Pune</strong>
<span>Consumer protection · Adv. N. Joshi</span>
</a>
<a class="legal-city">
<strong>Kolkata</strong>
<span>Civil law · Adv. T. Mukherjee</span>
</a>
<a class="legal-city">
<strong>Kochi</strong>
<span>Education fraud · Adv. A. Pillai</span>
</a>
<a class="legal-city">
<strong>Ahmedabad</strong>
<span>Consumer + commercial · Adv. V. Patel</span>
</a>
<a class="legal-city">
<strong>Jaipur</strong>
<span>Consumer court · Adv. R. Singh</span>
</a>
<a class="legal-city">
<strong>Lucknow</strong>
<span>Civil fraud · Adv. D. Verma</span>
</a>
<a class="legal-city">
<strong>Guwahati</strong>
<span>Consumer law · Adv. B. Das</span>
</a>
</div>
<p class="legal-aid-micro">Free first 30-minute consultation for LTA community members. Lawyer names are illustrative — real attorney list to be confirmed before launch.</p>
</div>
</div>
</div>
</section>

<!-- ============================================
17 — BLOG PREVIEW
============================================ -->
<section>
<div class="container">
<div class="section-head">
<div class="section-head-text">
<div class="eyebrow">Written by us · 24 posts</div>
<h2>The unglamorous knowledge that <em class="italic">gets you in</em>.</h2>
<p>Long-form guides on Germany and Austria. Updated every Friday. SEO that compounds — no clickbait.</p>
</div>
<a href="/blog" class="btn-link">All posts</a>
</div>

<div class="blog-grid">
<a href="/blog/universities/masters-germany-2026" class="blog-card">
<div class="blog-cover">
<div class="blog-cover-text">Master's in <em>Germany</em> 2026</div>
</div>
<div class="blog-meta">Universities · 12 min read · Apr 28</div>
<h4>Master's in Germany 2026 — the complete guide</h4>
<p>Every English-taught program, tuition reality, intake deadlines, and what's changed in 2026.</p>
</a>
<a href="/blog/money/blocked-account-2026" class="blog-card">
<div class="blog-cover cover-2">
<div class="blog-cover-text">€11,904 blocked, <em>compared</em></div>
</div>
<div class="blog-meta">Money · 8 min read · Apr 21</div>
<h4>Blocked account €11,904: every provider compared</h4>
<p>Fintiba vs Expatrio vs Coracle vs Deutsche Bank — fees, speed, refund terms, embassy acceptance.</p>
</a>
<a href="/blog/visa/student-interview-questions" class="blog-card">
<div class="blog-cover cover-3">
<div class="blog-cover-text">27 visa interview <em>questions</em></div>
</div>
<div class="blog-meta">Visa · 10 min read · Apr 14</div>
<h4>Student visa interview: 27 questions Indian students get asked</h4>
<p>Real questions from VFS centers in Mumbai, Delhi, Bangalore, Chennai. Sample answers that work.</p>
</a>
</div>
</div>
</section>

<!-- ============================================
18 — TEAM
============================================ -->
<section class="team-section" style="background: var(--paper);">
<div class="container">
<div class="section-head">
<div class="section-head-text">
<div class="eyebrow">Meet the team · 05 people</div>
<h2>Real names. <em class="italic">Real</em> faces.</h2>
<p>Not a faceless agency. Five people who run LTA today, and the names on every email you'll receive.</p>
</div>
</div>

<div class="team-grid">
<div class="team-card-founder">
<div>
<div class="team-tag">Founder</div>
<div class="team-portrait">J</div>
<h3>Joyel V Boban</h3>
<div class="team-role">Founder · CEO</div>
<div class="team-quote">"I built LTA because I was scammed twice in my application year. Every feature here is an answer."</div>
<div class="team-bio">M.Sc. University of Duisburg-Essen · Currently Propulsion PM Intern at Rocket Factory Augsburg · Operating from Augsburg, Germany.</div>
</div>
</div>
<div class="team-card">
<div class="team-portrait">A</div>
<h4>Ann Mariya Jaisan</h4>
<div class="team-role">Head of Media</div>
<div class="team-bio">Runs LTA's content, blog, social channels, and student community media. Editorial direction lead.</div>
</div>
<div class="team-card">
<div class="team-portrait">J</div>
<h4>Jisha Nelson</h4>
<div class="team-role">Applications Lead</div>
<div class="team-bio">Heads the application team. 200+ SOPs reviewed in 2025. Owns the Course Shortlisting Tool admit-% model.</div>
</div>
<div class="team-card">
<div class="team-portrait">K</div>
<h4>Karishma Jangide</h4>
<div class="team-role">Sales & BD Head</div>
<div class="team-bio">First conversation most students have with LTA. Owner of the partnerships and enterprise funnel.</div>
</div>
<div class="team-card">
<div class="team-portrait">A</div>
<h4>Atheena Fathima</h4>
<div class="team-role">Operations Head</div>
<div class="team-bio">Keeps the 45-day post-arrival concierge running. Anmeldung, SIM, Deutschland Ticket — that's Atheena.</div>
</div>
</div>

<p style="margin-top: 40px; font-size: 13px; color: var(--ink-soft); font-style: italic;">Note: avatar placeholders shown above will be replaced with real headshots before launch.</p>
</div>
</section>

<!-- ============================================
19 — FINAL CTA
============================================ -->
<section style="padding: 100px 0;">
<div class="final-cta">
<h2>Still scrolling? Talk to a <em class="italic">human</em>. 30 minutes. Free.</h2>
<p>No sales pitch. No drip campaign. Just an honest read on whether what you're trying to do makes sense — and what we'd do next.</p>
<a href="/enquiry" class="btn btn-primary">Book free consultation →</a>
</div>
</section>

<!-- ============================================
FOOTER
============================================ -->
<footer class="footer">
<div class="container">
<div class="footer-top">
<div class="footer-brand">
<a href="/" class="logo">Letters to <strong><em>Abroad</em></strong></a>
<p>Student-founded community helping you study and work in Germany. Auslandsbriefe Pvt. Ltd. · founded 2021.</p>
</div>
<div class="footer-col">
<h5>Study</h5>
<ul>
<li><a href="/study/germany">Germany</a></li>
<li><a href="/study/germany/masters">Master's in Germany</a></li>
<li><a href="/study/austria">Austria · Soon</a></li>
<li><a href="/study/spain">Spain · Soon</a></li>
<li><a href="/study/netherlands">Netherlands · Soon</a></li>
<li><a href="/study/italy">Italy · Soon</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Train & Work</h5>
<ul>
<li><a href="/train-and-work/ausbildung">Ausbildung</a></li>
<li><a href="/live/blue-card">EU Blue Card</a></li>
<li><a href="/live/job-seeker-visa">Job Seeker Visa</a></li>
<li><a href="https://project004.letterstoabroad.com">Project004 ↗</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Products</h5>
<ul>
<li><a href="/products/zenna">LTA Zenna</a></li>
<li><a href="https://connect.letterstoabroad.com">LTA Connect ↗</a></li>
<li><a href="/products/course-shortlisting">Shortlisting Tool</a></li>
<li><a href="https://project004.letterstoabroad.com">Project004 ↗</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Resources</h5>
<ul>
<li><a href="/tools">All tools</a></li>
<li><a href="/blog">Blog</a></li>
<li><a href="/blog/scam-alerts">Scam alerts</a></li>
<li><a href="/resources/legal-aid">Legal aid</a></li>
</ul>
</div>
<div class="footer-col">
<h5>Company</h5>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/about/team">Team</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/about/partner">Partner with us</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
<div>© 2026 Auslandsbriefe Pvt. Ltd. · Founded by Joyel V Boban</div>
<div class="footer-social">
<a href="#">Instagram</a>
<a href="#">LinkedIn</a>
<a href="#">YouTube</a>
<a href="#">WhatsApp</a>
</div>
<div class="footer-legal">
<a href="/privacy">Privacy</a>
<a href="/terms">Terms</a>
<a href="/refund-policy">Refund</a>
<a href="/imprint">Impressum</a>
</div>
</div>
</div>
</footer>

<script>
// Sticky header border on scroll
window.addEventListener('scroll', () => {
document.getElementById('header').classList.toggle('scrolled', window.scrollY > 20);
});

// Multi-step form
function nextStep(n) {
document.querySelectorAll('.form-step').forEach(s => s.classList.remove('active'));
document.getElementById('step-' + n).classList.add('active');
for (let i = 1; i <= 3; i++) {
document.getElementById('prog-' + i).classList.toggle('active', i <= n);
}
}
function prevStep(n) { nextStep(n); }
function submitForm() {
const card = document.querySelector('.form-card');
card.innerHTML = `
<div style="text-align: center; padding: 40px 20px;">
<div style="width:64px;height:64px;background:rgba(11,110,46,0.12);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 24px;">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none"><path d="M5 12l5 5 9-12" stroke="#0B6E2E" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
</div>
<h3 style="margin-bottom: 12px;">Got it. We'll be in touch.</h3>
<p style="font-size: 14px; color: var(--ink-soft); max-width: 380px; margin: 0 auto;">Karishma or Atheena will call you in your chosen time slot. Check your email — we just sent a confirmation with a calendar invite.</p>
</div>
`;
}

// Reveal on scroll
const observer = new IntersectionObserver((entries) => {
entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
}, { threshold: 0.1 });
document.querySelectorAll('.reveal').forEach(el => observer.observe(el));
</script>

</body>
</html>
(1-1/2)