/* ===== Brand & Base ===== */
:root{
  --orange:#ff7a1a;     /* marigold */
  --orange2:#ffb36b;    /* sunset */
  --ink:#101010;
  --muted:#5f5f5f;
  --bg:#fff8f2;         /* warm sand */
  --card:#ffffff;
  --line:#f1e4d8;
  --max:1040px;
  --radius:14px;
  --ring:0 0 0 1px var(--line), 0 10px 30px rgba(0,0,0,.05);
}
*{box-sizing:border-box}
html{font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif; line-height:1.55}
body{margin:0; color:var(--ink); background:var(--bg)}
.wrap{max-width:var(--max); margin:0 auto; padding:1.25rem}
h1,h2,h3{line-height:1.2; margin:0 0 .5rem}
h1{font-size:2.2rem}
h2{font-size:1.55rem}
h3{font-size:1.15rem}
p{margin:.5rem 0 1rem}
a{color:#0a66c2; text-decoration:none}
a:hover{text-decoration:underline}

/* ===== Ornaments (modernized ancient) ===== */
.bg{position:fixed; inset:0; pointer-events:none; z-index:-1}
.sun{
  position:absolute; left:-20vmax; top:-15vmax; width:70vmax; height:70vmax;
  background: radial-gradient(40% 40% at 50% 50%, rgba(255,122,26,.35), transparent 70%);
  filter: blur(60px) saturate(120%); opacity:.9;
}
.mandala{
  position:absolute; right:-12vmax; bottom:-10vmax; width:54vmax; height:54vmax;
  background:
    repeating-conic-gradient(from 0deg, rgba(255,179,107,.35) 0 18deg, transparent 18deg 36deg),
    radial-gradient(circle at 50% 50%, rgba(255,122,26,.25) 0 5%, transparent 6%),
    radial-gradient(circle at 50% 50%, rgba(255,179,107,.35) 0 25%, transparent 26%);
  mask: radial-gradient(circle at 50% 50%, black 0 60%, transparent 61%);
  filter: blur(30px);
  opacity:.65;
}
.border-top, .border-bottom{
  position:absolute; left:0; right:0; height:12px;
  background-image: repeating-linear-gradient(90deg, rgba(255,122,26,.25) 0 12px, transparent 12px 24px);
  mix-blend-mode: multiply;
}
.border-top{top:0}
.border-bottom{bottom:0}

/* ===== Header ===== */
.site-header{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:.5rem}
.logo{display:flex; align-items:center; gap:.6rem; color:var(--ink)}
.logo-mark{
  display:grid; place-items:center; width:36px; height:36px; border-radius:10px;
  background:linear-gradient(135deg,var(--orange),var(--orange2)); color:#fff; font-weight:800;
  box-shadow:var(--ring);
}
.logo-type{font-weight:700; letter-spacing:.2px}
.nav a{margin-left:.9rem}
.btn{margin-left:.5rem}

/* ===== Hero ===== */
.hero{
  position:relative; padding:3rem 1.25rem 2rem; border-radius:var(--radius);
  background: linear-gradient(135deg, var(--orange), var(--orange2));
  color:#fff; box-shadow:var(--ring);
}
.hero .lead{max-width:62ch}
.accent{color:#fff; text-decoration:underline; text-decoration-thickness:3px; text-underline-offset:6px}
.hero-stats{display:flex; gap:1rem; list-style:none; padding:0; margin:1rem 0 0; flex-wrap:wrap}
.hero-stats li{
  background: rgba(255,255,255,.15); border:1px solid rgba(255,255,255,.35);
  padding:.45rem .65rem; border-radius:999px; font-size:.95rem;
}

/* ===== Sections ===== */
.section{padding:1.8rem 1.25rem}
.kicker{color:var(--muted); margin:-.25rem 0 1rem}
.about{max-width:70ch}

/* ===== Buttons ===== */
.btn{
  display:inline-block; padding:.6rem .9rem; border-radius:10px; border:2px solid transparent;
  font-weight:600; text-decoration:none; transition: transform .05s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn--solid{background:var(--orange); color:#fff}
.btn--solid:hover{background:var(--orange2); color:#fff}
.btn--line{border-color:#fff; color:#fff; background:transparent}
.btn--line:hover{border-color:#fff; background:rgba(255,255,255,.15)}
.btn--ghost{border-color:rgba(255,122,26,.4); color:var(--ink); background:rgba(255,122,26,.08)}
.btn--ghost:hover{border-color:var(--orange); background:rgba(255,122,26,.15)}

/* ===== Timeline ===== */
.tl{position:relative; display:grid; grid-template-columns: 28px 1fr; gap:1rem; margin-top:1rem}
.tl-spine{
  position:relative; grid-column:1; width:4px; margin:0 auto; background:#f1e4d8; border-radius:999px;
}
.tl-progress{
  position:absolute; left:0; top:0; width:100%; height:100%;
  transform-origin: top; transform: scaleY(0);
  background: linear-gradient(180deg, var(--orange), var(--orange2));
  border-radius:999px;
}
.tl-list{grid-column:2; list-style:none; margin:0; padding:0}
.tl-item{position:relative; display:grid; grid-template-columns: 1fr; gap:.5rem; margin:0 0 1.25rem 0}
.tl-dot{
  position:absolute; left:-38px; top:.75rem; width:14px; height:14px; border-radius:50%;
  background:#fff; border:3px solid var(--orange); box-shadow:0 0 0 4px rgba(255,122,26,.12);
}
.tl-card{
  background:var(--card); border-radius:var(--radius); padding:1rem; box-shadow:var(--ring);
  border:1px dashed #ffd7b5;
  opacity:0; transform:translateY(10px);
  transition:opacity .45s ease, transform .45s ease;
}
.tl-item.in .tl-card{opacity:1; transform:translateY(0)}
.tl-range{display:inline-block; font-weight:700; color:var(--orange); margin-bottom:.25rem}
.tl-meta{color:var(--muted); margin:.15rem 0 .6rem}

/* wider screens */
@media (min-width: 900px){
  .tl{grid-template-columns: 36px 1fr}
  .tl-dot{left:-46px}
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .tl-progress{transition:none}
  .tl-card{transition:none; opacity:1; transform:none}
}

/* ===== Contact & Footer ===== */
.contact-text{max-width:60ch}
.contact-links .btn{margin-right:.5rem; margin-bottom:.5rem}
.footer{padding:2rem 1.25rem 3rem; color:#6a6a6a}