:root{
  /* Palette */
  --teal:#3BA99C;         /* trust, openness */
  --coral:#F26A5E;        /* warmth, friendly energy */
  --sand:#F5EBDD;         /* soft background */
  --charcoal:#2F3A3B;     /* calm text */
  --honey:#F2B950;        /* optimistic accent */

  --bg: var(--sand);
  --text: var(--charcoal);
  --maxw: 1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.hero{
  position:relative;
  min-height:100svh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  overflow:hidden;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(59,169,156,0.18), transparent 60%),
    radial-gradient(900px 500px at 110% 20%, rgba(242,105,94,0.15), transparent 60%),
    radial-gradient(700px 400px at 50% 120%, rgba(242,185,80,0.18), transparent 60%),
    var(--bg);
}

.overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,0.75), rgba(255,255,255,0.35));
  pointer-events:none;
}

.site-header{
  position:relative;
  z-index:2;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:20px clamp(16px, 4vw, 28px);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  font-weight:700;
  letter-spacing:0.2px;
  color:var(--text);
}

.logo-dot{
  width:28px;
  height:28px;
  border-radius:12px;
  background:
    radial-gradient(circle at 30% 30%, #ffffff 0, #ffffff 8%, transparent 9%) , 
    linear-gradient(135deg, var(--teal), var(--coral));
  box-shadow:0 6px 18px rgba(0,0,0,0.12);
  transform:translateZ(0);
}

.brand-name{font-size:16px}

.header-link{
  color:var(--teal);
  text-decoration:none;
  font-weight:600;
  border-bottom:2px solid transparent;
  transition:opacity .2s ease, border-color .2s ease;
}
.header-link:hover{opacity:.85; border-color:var(--teal)}

.content{
  position:relative;
  z-index:2;
  max-width:var(--maxw);
  margin:0 auto;
  padding: clamp(32px, 6vw, 64px) clamp(16px, 4vw, 28px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:20px;
}

.title{
  margin:0;
  font-size: clamp(32px, 6vw, 60px);
  line-height:1.05;
  letter-spacing:-0.5px;
  color:var(--text);
  animation:fadeUp .8s ease both;
}

.subtitle{
  margin:0;
  font-size: clamp(18px, 2.4vw, 22px);
  max-width: 56ch;
  color:#3b4748;
  animation:fadeUp .8s ease .08s both;
}

.cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  padding-top:6px;
  animation:fadeUp .8s ease .16s both;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 18px;
  font-weight:700;
  text-decoration:none;
  border-radius:999px;
  border:2px solid transparent;
  transition:transform .08s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  will-change:transform;
}

.btn:active{transform:translateY(1px)}

.btn.primary{
  background:linear-gradient(135deg, var(--teal), #2c8e83);
  color:white;
  box-shadow:0 10px 24px rgba(59,169,156,0.30);
}
.btn.primary:hover{box-shadow:0 12px 28px rgba(59,169,156,0.38)}

.btn.ghost{
  background:transparent;
  color:var(--coral);
  border-color:rgba(242,106,94,0.55);
}
.btn.ghost:hover{
  background:rgba(242,106,94,0.08);
  border-color:var(--coral);
}

.note{
  margin:6px 0 0 2px;
  font-size:14px;
  color:#4b5859;
}

.site-footer{
  position:relative;
  z-index:2;
  max-width:var(--maxw);
  margin-inline:auto;
  padding:16px clamp(16px, 4vw, 28px) 32px;
}

.taglist{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.taglist span{
  font-size:12px;
  font-weight:700;
  letter-spacing:.3px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(47,58,59,0.06);
  color:#3f4b4c;
  border:1px solid rgba(47,58,59,0.10);
}

/* Decorative shapes for energy and depth */
.shape{
  position:absolute;
  filter:blur(18px);
  opacity:.45;
  pointer-events:none;
  transform:translateZ(0);
}
.shape-1{
  width:220px; height:220px; border-radius:60px;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.7), transparent 60%),
              linear-gradient(135deg, var(--coral), var(--honey));
  top:12%; left:-60px;
  animation:floatA 9s ease-in-out infinite;
}
.shape-2{
  width:280px; height:280px; border-radius:80px;
  background: radial-gradient(circle at 70% 40%, rgba(255,255,255,.6), transparent 55%),
              linear-gradient(135deg, var(--teal), #2c8e83);
  bottom:-80px; right:-60px;
  animation:floatB 11s ease-in-out infinite;
}
.shape-3{
  width:140px; height:140px; border-radius:40px;
  background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.65), transparent 60%),
              linear-gradient(135deg, var(--honey), var(--coral));
  bottom:20%; left:50%;
  transform:translateX(-50%);
  animation:floatC 10s ease-in-out infinite;
}

/* Motion */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(10px)}
  to{opacity:1; transform:translateY(0)}
}
@keyframes floatA{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(8px, -10px)}
}
@keyframes floatB{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-10px, 12px)}
}
@keyframes floatC{
  0%,100%{transform:translate(-50%,0)}
  50%{transform:translate(-55%, -8px)}
}

/* Responsive tweaks */
@media (max-width: 720px){
  .brand-name{display:none}
  .subtitle{max-width: 60ch}
}