/* ===== Sebastian Voyage Brand ===== */



@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Poppins:wght@500;600;700&display=swap');



:root{

  --bg1: #f5f8ff;

  --bg2: #ffffff;

  --primary: #1d4ed8;

  --accent: #f59e0b;

  --text: #0f172a;

  --muted: #475569;

  --card: #ffffff;

  --border: rgba(15, 23, 42



body {

body {

  font-family: 'Inter', sans-serif;

  background: linear-gradient(180deg, var(--bg1), var(--bg2));

  color: var(--text);

  line-height: 1.6;
  font-family: 'Inter', sans-serif;

  background: var(--bg);

  color: var(--text);

  margin: 0;

  line-height: 1.6;

}



h1, h2, h3 {

  font-family: 'Poppins', sans-serif;

  color: var(--primary);
:root{

  --bg1:#f7fbff;

  --bg2:#ffffff;

  --primary:#1d4ed8;

  --accent:#fb8500;

  --text:#0f172a;

  --muted:#475569;

  --card:#ffffff;

  --border:rgba(15,23,42,.12);

}



*{box-sizing:border-box}

body{

  margin:0;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  color:var(--text);

  background: linear-gradient(180deg, var(--bg1), var(--bg2));

}



.wrap{min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:28px 16px}

.card{

  width:min(980px, 94vw);

  background:var(--card);

  border:1px solid var(--border);

  border-radius:22px;

  box-shadow:0 18px 45px rgba(2,6,23,.10);

  padding:34px 28px;

}



.eyebrow{font-weight:800; color:var(--primary); letter-spacing:.02em}

h1{margin:6px 0 8px; font-size:40px; line-height:1.1; color:var(--primary)}

h2{margin:18px 0 8px; font-size:20px}

p{margin:10px 0; color:var(--muted); font-size:16px; line-height:1.55}



.nav{display:flex; flex-wrap:wrap; gap:10px; margin:14px 0 8px}

.nav a{

  text-decoration:none;

  padding:9px 14px;

  border:1px solid var(--border);

  border-radius:999px;

  color:var(--text);

  background:#fff;

  font-weight:700;

}

.nav a.active{border-color:var(--primary); color:var(--primary)}

.nav a:hover{border-color:var(--primary); color:var(--primary)}



.section{margin-top:14px; padding-top:12px; border-top:1px solid var(--border)}

.btn{

  display:inline-block;

  margin-top:10px;

  padding:10px 14px;

  border-radius:12px;

  font-weight:900;

  text-decoration:none;

  border:1px solid var(--border);

}

.btn.primary{background:var(--primary); color:#fff; border-color:transparent}

.btn.secondary{background:var(--accent); color:#111827; border-color:transparent}



.footer{

  width:min(980px, 94vw);

  margin-top:16px;

  padding:18px 10px;

  text-align:center;

  font-size:14px;

  color:var(--muted);

}

.footer a{color:var(--primary); text-decoration:none; font-weight:800}

.footer a:hover{text-decoration:underline}

/* Sebastian AI card */

.sebastian-box{

  display: flex;

  gap: 14px;

  align-items: flex-start;

  padding: 16px;

  border: 1px solid rgba(15,23,42,0.10);

  border-radius: 16px;

  background: rgba(255,255,255,0.75);

  box-shadow: 0 10px 28px rgba(15,23,42,0.08);

}



.sebastian-avatar{

  width: 52px;

  height: 52px;

  border-radius: 14px;

  display: grid;

  place-items: center;

  font-weight: 800;

  font-size: 20px;

  color: #ffffff;

  background: #1d4ed8;

  flex: 0 0 auto;

}



.sebastian-content{

  flex: 1;

  min-width: 0;

}



.sebastian-name{

  margin: 0 0 6px 0;

  font-weight: 800;

  font-size: 16px;

  color: #0f172a;

}



.sebastian-actions{

  margin-top: 12px;

}



/* Mobile: stack nicely */

@media (max-width: 520px){

  .sebastian-box{

    flex-direction: column;

  }

  .sebastian-avatar{

    width: 56px;

    height: 56px;

/* --- Sebastian (AI) block on Contact page --- */

.sebastian-box{

  margin-top: 14px;

  padding: 14px;

  border: 1px solid var(--border);

  border-radius: 14px;

  background: rgba(255,255,255,0.75);

}



.sebastian-head{

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 10px;

}



.sebastian-avatar{

  width: 44px;

  height: 44px;

  border-radius: 999px;

  background: var(--primary);

  color: #fff;

  display: grid;

  place-items: center;

  font-weight: 800;

  letter-spacing: 0.5px;

  flex: 0 0 auto;

}



.sebastian-title{

  margin: 0;

  font-size: 16px;

  font-weight: 800;

}



.sebastian-sub{

  margin: 2px 0 0;

  color: var(--muted);

  font-size: 13px;

}



.sebastian-cta{

  margin-top: 10px;

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

/* --- Sebastian (AI) block on Contact page --- */

.sebastian-box{

  margin-top: 14px;

  padding: 14px;

  border: 1px solid var(--border);

  border-radius: 14px;

  background: rgba(255,255,255,0.75);

}



.sebastian-head{

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 10px;

}



.sebastian-avatar{

  width: 44px;

  height: 44px;

  border-radius: 999px;

  background: var(--primary);

  color: #fff;

  display: grid;

  place-items: center;

  font-weight: 800;

  letter-spacing: 0.5px;

  flex: 0 0 auto;

}

/* --- Sebastian card styles --- */

.sebastian-box{

  border: 1px solid rgba(15, 23, 42, 0.12);

  border-radius: 16px;

  padding: 18px;

  background: #ffffff;

}



.sebastian-head{

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 10px;

}



.sebastian-avatar{

  width: 52px;

  height: 52px;

  border-radius: 14px;          /* rounded square */

  background: #1d4ed8;          /* same blue theme */

  color: #ffffff;

  font-weight: 800;

  font-size: 22px;



  display: flex;               /* centers the S */

  align-items: center;

  justify-content: center;

}



.sebastian-name{

  margin: 0;

  font-weight: 800;

  font





.sebastian-title{

  margin: 0;

  font-size: 16px;

  font-weight: 800;

}



.sebastian-sub{

  margin: 2px 0 0;

  color: var(--muted);

  font-size: 13px;

}



.sebastian-cta{

  margin-top: 10px;

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

/* Sebastian block */

.sebastian-box{

  margin-top: 18px;

  padding: 16px;

  border: 1px solid var(--border);

  border-radius: 16px;

  background: rgba(255,255,255,0.65);

}



.sebastian-head{

  display: flex;

  gap: 12px;

  align-items: center;

  margin-bottom: 10px;

}



.sebastian-avatar{

  width: 44px;

  height: 44px;

  border-radius: 999px;

  background: var(--primary);

  color: white;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 18px;

  flex: 0 0 44px;

}



.sebastian-actions{

  display: flex;

  gap: 10px;

  flex-wrap: wrap;

  margin-top: 12px;

/* Sebastian avatar */

.sebastian-head{

  display: flex;

  gap: 12px;

  align-items: center;

}



.sebastian-avatar{

  width: 44px;

  height: 44px;

  border-radius: 50%;

  background: var(--primary);

  color: #fff;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 18px;



/* --- Sebastian AI card --- */

.sebastian-box{

  margin-top: 14px;

  padding: 16px;

  border: 1px solid var(--border);

  border-radius: 16px;

  background: #fff;

  box-shadow: 0 10px 24px rgba(15,23,42,0.08);

}



.sebastian-head{

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 10px;

}



.sebastian-avatar{

  width: 56px;

  height: 56px;

  border-radius: 14px;

  background: var(--primary);

  display: flex;

  align-items: center;

  justify-content: center;

  color: #fff;

  font-weight: 800;

  font-size: 26px;

  line-height: 1;

}



.sebastian-name{

  margin: 0;

  font-size: 20px;

  font-weight: 800;

}



.sebastian-desc{

  margin: 0;

  color: var(--muted);

  line-height: 1.4;

}



.sebastian-actions{

  margin-top: 14px; ]
/* --- Sebastian (AI) card --- */

.section.sebastian-box{

  margin-top: 18px;

  padding: 18px;

  border: 1px solid var(--border);

  border-radius: 18px;

  background: var(--card);

  box-shadow: 0 8px 24px rgba(15,23,42,0.06);

}



.sebastian-head{

  display: flex;

  align-items: center;

  gap: 14px;

  margin-bottom: 10px;

}



.sebastian-avatar{

  width: 56px;

  height: 56px;

  border-radius: 16px;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 800;

  font-size: 22px;

  color: #fff;

  background: var(--primary);

  flex: 0 0 auto;

}



.sebastian-name{

  margin: 0;

  font-size: 20px;

  font-weight: 800;

  color: var(--text);

  line-height: 1.2;

}



.sebastian-desc{

  margin: 6px 0 0 0;

  color: var(--muted);

  line-height: 1.5;

}



.sebastian-actions{

  margin-top: 14px;

}



.sebastian-actions .btn{

  display: inline-block;

  padding: 12px 16px;

  border-radius: 14px;

  font-weight: 700;

/* --- Sebastian (AI) card --- */

.sebastian-box{

  background: var(--card);

  border: 1px solid var(--border);

  border-radius: 18px;

  padding: 18px;

  margin-top: 14px;

  box-shadow: 0 12px 30px rgba(15,23,42,0.10);

}



.sebastian-head{

  display: flex;

  align-items: center;

  gap: 12px;

  margin-bottom: 10px;

}



.sebastian-avatar{

  width: 56px;

  height: 56px;

  border-radius: 14px;

  background: var(--primary);

  color: #fff;

  display: grid;

  place-items: center;

  font-weight: 800;

  font-size: 22px;

  letter-spacing: 0.5px;

  flex: 0 0 56px;

}



.sebastian-name{

  margin: 0;

  font-weight: 800;

  font-size: 22px;

  line-height: 1.1;

}



.sebastian-desc{

  margin: 0;

  color: var(--muted);

  font-size: 16px;

  line-height: 1.5;

}



.sebastian-actions{

  margin-top: 14px;

}



.sebastian-actions .btn{

  width: 100%;

  text-align: center;

  padding: 14px 16px;

  border-radius: 14px;

  font-weight: 800;

  font-size: 16px;

}



@media (min-width: 720px){

  .sebastian-actions .btn{

    width: auto;
.sebastian-box {

  background: #ffffff;

  border-radius: 16px;

  padding: 20px;

  border: 1px solid var(--border);

  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.sebastian-box:hover {

  transform: translateY(-4px);

  box-shadow: 0 16px 40px rgba(15,
.btn {

  display: inline-block;

  padding: 12px 20px;

  border-radius: 10px;

  font-weight: 600;

  text-decoration: none;

}



.btn.primary {

  background: var(--primary);

  color: white;

}



.btn.secondary {

  background: var(--secondary);

  color: white;



.sebastian-card {

  background: var(--soft-bg);

  border-radius: 16px;

  padding: 24px;

  text-align: center;

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);

}



.sebastian-name {

  font-family: 'Poppins', sans-serif;

  font-size: 22px;

  color: var(--primary);

  margin-top: 12px;

}



.sebastian-role {

  color: var(--muted);

  font-size: 14px;