/* ============================================================
   CodebyCarter — alive.css
   "Your site is never finished" — charcoal workshop + electric
   mint palette. The ongoing-partnership pitch. Most edits are
   included. Text Carter when stuff changes.
   ============================================================ */

.alive{
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(127,191,157,.10), transparent 60%),
    radial-gradient(700px 500px at 85% 90%, rgba(229,178,153,.08), transparent 60%),
    linear-gradient(170deg, #16191C 0%, #22262A 50%, #16191C 100%);
  color:#E8EEEA;
  padding:clamp(120px,14vw,200px) 0;
  position:relative;overflow:hidden;
  --al-bg:#16191C;
  --al-bg2:#22262A;
  --al-mint:#7FBF9D;
  --al-mint-bright:#A8E6CF;
  --al-amber:#E5B299;
  --al-text:#E8EEEA;
  --al-mute:#8C9892;
  --al-line:rgba(127,191,157,.22);
}

/* Subtle grid texture — workshop graph-paper vibe */
.alive::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(127,191,157,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,191,157,.045) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at center, black 30%, transparent 85%);
  -webkit-mask-image:radial-gradient(ellipse at center, black 30%, transparent 85%);
}

/* Floating ambient glow */
.alive-glow{
  position:absolute;width:520px;height:520px;border-radius:50%;
  filter:blur(110px);pointer-events:none;z-index:0;
}
.alive-glow--mint{background:rgba(127,191,157,.30);top:-8%;left:-8%;animation:alFloat1 22s ease-in-out infinite}
.alive-glow--amber{background:rgba(229,178,153,.22);bottom:-10%;right:-8%;animation:alFloat2 26s ease-in-out infinite}
@keyframes alFloat1{0%,100%{transform:translate(0,0)}50%{transform:translate(60px,40px)}}
@keyframes alFloat2{0%,100%{transform:translate(0,0)}50%{transform:translate(-50px,-30px)}}

.alive .shell{position:relative;z-index:2}

/* ============================================================
   HEAD
   ============================================================ */
.alive-eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.20em;
  text-transform:uppercase;color:var(--al-mint-bright);font-weight:700;
  margin-bottom:20px;display:inline-flex;align-items:center;gap:12px;
}
.alive-eyebrow .live-dot{
  width:9px;height:9px;border-radius:50%;background:var(--al-mint-bright);
  box-shadow:0 0 0 0 rgba(168,230,207,.6);animation:livePulse 1.8s ease-in-out infinite;
}
@keyframes livePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(168,230,207,.7)}
  50%{box-shadow:0 0 0 8px rgba(168,230,207,0)}
}

.alive-h{
  font-size:clamp(44px,8vw,112px);line-height:.98;letter-spacing:-.04em;font-weight:600;
  margin-bottom:28px;color:var(--al-text);max-width:18ch;
}
.alive-h .ital{
  font-family:'Instrument Serif',serif;font-style:italic;font-weight:400;
  background:linear-gradient(135deg, var(--al-mint-bright), var(--al-amber));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

.alive-sub{
  font-size:clamp(17px,1.7vw,22px);color:#B5C2BB;line-height:1.6;
  max-width:62ch;margin-bottom:64px;
}
.alive-sub b{color:var(--al-text);font-weight:600}
.alive-sub em{
  font-style:italic;font-family:'Instrument Serif',serif;font-weight:400;
  color:var(--al-mint-bright);font-size:1.08em;
}

/* ============================================================
   "TEXT CARTER WHEN..." CARDS
   ============================================================ */
.alive-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:56px;
}
.alive-card{
  background:rgba(255,255,255,.025);
  border:1px solid var(--al-line);
  border-radius:16px;
  padding:28px 24px 26px;
  position:relative;overflow:hidden;
  transition:transform .45s cubic-bezier(.16,1,.3,1), border-color .45s ease, background .45s ease;
}
.alive-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg, var(--al-mint), var(--al-mint-bright));
  transform:scaleX(0);transform-origin:left;transition:transform .55s cubic-bezier(.16,1,.3,1);
}
.alive-card:hover{
  transform:translateY(-5px);
  background:rgba(127,191,157,.06);
  border-color:var(--al-mint);
}
.alive-card:hover::before{transform:scaleX(1)}

.alive-card-icon{
  width:46px;height:46px;border-radius:12px;
  background:linear-gradient(135deg, rgba(127,191,157,.22), rgba(168,230,207,.10));
  border:1px solid rgba(127,191,157,.30);
  color:var(--al-mint-bright);
  display:grid;place-items:center;margin-bottom:18px;
}
.alive-card-tag{
  font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--al-mint);font-weight:700;margin-bottom:10px;
}
.alive-card-h{
  font-size:18px;font-weight:600;letter-spacing:-.015em;
  color:var(--al-text);margin-bottom:8px;line-height:1.3;
}
.alive-card-p{
  font-size:14px;color:#A0AEA7;line-height:1.55;
}

/* ============================================================
   "INCLUDED IN MONTHLY" CALLOUT
   ============================================================ */
.alive-callout{
  background:linear-gradient(135deg, rgba(127,191,157,.10), rgba(229,178,153,.06));
  border:1px solid rgba(127,191,157,.35);
  border-radius:18px;
  padding:30px 36px;
  display:flex;gap:24px;align-items:center;
  max-width:820px;margin:0 auto;
  position:relative;overflow:hidden;
}
.alive-callout::before{
  content:"";position:absolute;top:-50%;left:-20%;width:60%;height:200%;
  background:radial-gradient(ellipse at center, rgba(168,230,207,.10), transparent 70%);
  filter:blur(40px);pointer-events:none;
}
.alive-callout-mark{
  flex:0 0 auto;width:64px;height:64px;border-radius:14px;
  background:linear-gradient(135deg, var(--al-mint), var(--al-mint-bright));
  color:#16191C;display:grid;place-items:center;
  font-family:'Instrument Serif',serif;font-style:italic;
  font-size:38px;line-height:1;letter-spacing:-.04em;font-weight:400;
  box-shadow:0 14px 30px -8px rgba(127,191,157,.45);
}
.alive-callout-body{flex:1;min-width:0;position:relative;z-index:2}
.alive-callout-h{
  font-size:20px;font-weight:700;letter-spacing:-.015em;
  color:var(--al-text);margin-bottom:6px;
}
.alive-callout-p{
  font-size:15px;color:#B5C2BB;line-height:1.55;
}
.alive-callout-p b{color:var(--al-text);font-weight:600}

/* ============================================================
   COMPARISON LINE
   ============================================================ */
.alive-vs{
  margin-top:48px;text-align:center;
  font-family:'JetBrains Mono',monospace;font-size:13px;letter-spacing:.10em;
  color:var(--al-mute);text-transform:uppercase;
}
.alive-vs b{color:var(--al-mint-bright);font-weight:700}
.alive-vs span{color:#6A7670;text-decoration:line-through;text-decoration-color:rgba(229,178,153,.4)}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width:980px){
  .alive-grid{grid-template-columns:repeat(2,1fr);gap:14px}
}
@media (max-width:600px){
  .alive-grid{grid-template-columns:1fr}
  .alive-callout{flex-direction:column;gap:18px;padding:24px;text-align:center}
  .alive-glow{width:340px;height:340px;filter:blur(80px)}
}