:root{
  --bg:#0b1220;
  --card:rgba(255,255,255,.075);
  --card2:rgba(255,255,255,.055);
  --text:rgba(255,255,255,.92);
  --muted:rgba(255,255,255,.68);
  --line:rgba(255,255,255,.14);

  --shadow:0 24px 80px rgba(0,0,0,.55);
  --shadowSoft:0 14px 40px rgba(0,0,0,.35);

  /* accent colors */
  --a1:#fb7185;
  --a2:#8b5cf6;
  --a3:#38bdf8;
  --a4:#a3e635;
  --a5:#fbbf24;

  --max:1080px;
  --r:22px;
  --g:16px;
}

/* ===== reset ===== */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,"Noto Sans TC",sans-serif;
  color:var(--text);
  background:var(--bg);
  overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
p{margin:0;color:var(--muted);line-height:1.85}
ul{margin:0;padding-left:18px}

/* ===== background ===== */
.bg{
  position:fixed;
  inset:0;
  z-index:-2;
  background:
    radial-gradient(900px 520px at 12% 0%, rgba(251,113,133,.26), transparent 60%),
    radial-gradient(980px 560px at 88% 10%, rgba(56,189,248,.22), transparent 58%),
    radial-gradient(980px 600px at 50% 110%, rgba(163,230,53,.18), transparent 60%),
    radial-gradient(800px 420px at 55% 20%, rgba(139,92,246,.18), transparent 55%),
    var(--bg);
}
.bg::before{
  content:"";
  position:absolute;
  inset:-40px;
  background:
    radial-gradient(2px 2px at 10% 20%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(2px 2px at 30% 80%, rgba(255,255,255,.22), transparent 60%),
    radial-gradient(2px 2px at 55% 60%, rgba(255,255,255,.28), transparent 60%),
    radial-gradient(2px 2px at 70% 25%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(2px 2px at 88% 75%, rgba(255,255,255,.22), transparent 60%);
  opacity:.9;
}
.bg::after{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(14px 14px at 78% 32%, rgba(251,191,36,.18), transparent 60%),
    radial-gradient(18px 18px at 30% 58%, rgba(139,92,246,.16), transparent 60%);
  opacity:.85;
}

/* ===== layout ===== */
.container{
  max-width:var(--max);
  margin:0 auto;
  padding:28px 18px 72px;
}
.grid{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:var(--g);
}
.col-12{grid-column:span 12}
.col-8{grid-column:span 8}
.col-6{grid-column:span 6}
.col-4{grid-column:span 4}

/* ===== topbar ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  backdrop-filter:blur(10px);
  background:linear-gradient(to bottom,rgba(11,18,32,.88),rgba(11,18,32,.45));
  border-bottom:1px solid rgba(255,255,255,.08);
}
.topbar-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:16px 18px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* ===== LOGO (放大版) ===== */
.brand{
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:900;
  letter-spacing:-0.6px;
}
.brand-badge{
  width:48px;
  height:48px;
  border-radius:18px;
  background:conic-gradient(
    from 160deg,
    var(--a1),
    var(--a2),
    var(--a3),
    var(--a4),
    var(--a5),
    var(--a1)
  );
  box-shadow:
    0 22px 44px rgba(251,113,133,.30),
    0 0 0 6px rgba(255,255,255,.06);
  position:relative;
}
.brand-badge::after{
  content:"";
  position:absolute;
  inset:14px;
  border-radius:12px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,0,.1);
}
.brand span:last-child{
  font-size:22px;
  line-height:1;
}

/* ===== nav ===== */
.nav{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.nav a{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
  font-size:14px;
  font-weight:650;
}
.nav a:hover{background:rgba(255,255,255,.06)}
.nav a[aria-current="page"]{
  box-shadow:0 0 0 4px rgba(255,255,255,.12);
}
.nav .cta{
  background:linear-gradient(135deg,rgba(251,113,133,.92),rgba(139,92,246,.88));
  border-color:transparent;
  font-weight:800;
}

/* ===== cards ===== */
.card{
  position:relative;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px;
  box-shadow:var(--shadow);
  backdrop-filter:blur(12px);
}
.card.soft{
  background:var(--card2);
  box-shadow:var(--shadowSoft);
}
.card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:
    radial-gradient(600px 220px at 20% 0%, rgba(56,189,248,.18), transparent 55%),
    radial-gradient(600px 220px at 80% 20%, rgba(251,113,133,.16), transparent 55%);
  pointer-events:none;
}

/* ===== text ===== */
.kicker{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(255,255,255,.75);
  margin-bottom:10px;
}
h1{
  margin:0 0 12px;
  font-size:clamp(34px,4.4vw,56px);
  line-height:1.05;
  letter-spacing:-1px;
}
h2{
  margin:0 0 10px;
  font-size:18px;
}
.grad{
  background:linear-gradient(135deg,var(--a1),var(--a2),var(--a3));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ===== buttons ===== */
.btnrow{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}
.btn{
  padding:12px 14px;
  border-radius:16px;
  border:1px solid var(--line);
  font-weight:800;
  background:rgba(255,255,255,.03);
}
.btn-primary{
  background:linear-gradient(135deg,rgba(56,189,248,.95),rgba(139,92,246,.92));
  border-color:transparent;
  box-shadow:0 18px 40px rgba(56,189,248,.18);
}
.btn-ghost{background:rgba(255,255,255,.02)}

/* ===== badges / lists ===== */
.badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.badge{
  padding:8px 10px;
  font-size:13px;
  border-radius:999px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.03);
}
.list{
  margin-top:10px;
  color:rgba(255,255,255,.78);
  line-height:1.9;
}

/* ===== footer ===== */
.footer{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid rgba(255,255,255,.1);
  font-size:13px;
  color:rgba(255,255,255,.55);
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

/* ===== responsive ===== */
@media (max-width:940px){
  .topbar-inner{flex-direction:column;align-items:flex-start}
  .col-8,.col-6,.col-4{grid-column:span 12}
}
@media (max-width:600px){
  .brand-badge{width:40px;height:40px}
  .brand span:last-child{font-size:18px}
}

/* make icon + text align on one row */
.iconitem {
  display: flex;
  align-items: baseline; /* icon aligns with the top of text block */
  gap: 12px;
}

/* keep icon from shrinking / dropping */
.iconitem .ico {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: baseline;
  line-height: 1;
}

/* ensure title sits on same line with icon (not wrapping weirdly) */
.icontext .icontitle {
  display: flex;
  align-items: baseline;
  gap: 8px;
  line-height: 1.2;
  margin: 0;
}

/* optional: spacing + readability */
.icontext span {
  display: block;
  margin-top: 6px;
  opacity: 0.8; /* or match your design tokens */
}

/* overall list rhythm */
.iconlist {
  display: grid;
  gap: 18px; /* item-to-item spacing */
}

/* icon + text block alignment */
.iconitem {
  display: grid;
  grid-template-columns: 22px 1fr; /* icon column + text column */
  column-gap: 14px;
  align-items: start;
}

/* icon box */
.iconitem .ico {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  margin-top: 4px; /* visually align with title cap-height */
}

/* title */
.icontext .icontitle b {
  display: block;
  font-size: 1.25rem;     /* adjust if your system uses different sizes */
  line-height: 1.15;      /* tighter so it looks premium */
  margin: 0;
}

/* description */
.icontext span {
  display: block;
  margin-top: 8px;        /* consistent title->desc spacing */
  line-height: 1.5;       /* calmer than default 1.7~1.9 */
  opacity: 0.78;
  max-width: 34ch;        /* prevents overly wide paragraphs in that card */
}

/* About founder layout: text + photo */
.about-founder {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 32px;
  align-items: start;
}

.about-founder-photo img {
  width: 100%;
  max-width: 320px;
  border-radius: 24px;
  object-fit: cover;
  display: block;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Keep photo nicely aligned with the headline */
.about-founder-photo {
  padding-top: 6px;
}

/* Mobile: stack */
@media (max-width: 860px) {
  .about-founder {
    grid-template-columns: 1fr;
  }

  .about-founder-photo {
    order: -1; /* photo above text on mobile */
    padding-top: 0;
    margin-bottom: 12px;
  }

  .about-founder-photo img {
    max-width: 260px;
  }
}

/* About founder: photo left, text right */
.about-founder {
  display: grid;
  grid-template-columns: 0.8fr 1.7fr; /* photo smaller */
  gap: 28px;
  align-items: start;
}

.about-founder-photo img {
  width: 100%;
  max-width: 240px; /* smaller photo */
  border-radius: 20px;
  object-fit: cover;
  display: block;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.about-founder-photo {
  padding-top: 8px; /* align with headline cap height */
}

/* Mobile */
@media (max-width: 860px) {
  .about-founder {
    grid-template-columns: 1fr;
  }

  .about-founder-photo {
    order: -1; /* photo on top */
    margin-bottom: 10px;
    padding-top: 0;
  }

  .about-founder-photo img {
    max-width: 220px;
  }
}

/* About founder: tighten layout */
.about-founder {
  display: grid;
  grid-template-columns: auto minmax(0, 520px); /* photo + text */
  gap: 24px; /* 控制照片與文字距離 */
  align-items: start;
}

.about-founder {
  display: grid;
  grid-template-columns: auto minmax(0, 520px);
  gap: 24px;
  align-items: center; /* 👈 這一行是關鍵 */
}

.about-founder {
  display: grid;
  grid-template-columns: 240px minmax(0, 640px);
  gap: 32px;              /* 原本 18px → 拉開一點 */
  align-items: center;
  justify-content: center; /* ⭐ 讓整個 grid 在框框內置中 */
  margin: 0 auto;          /* ⭐ 保險用，確保置中 */
}